Border-bottom 在不应该显示的时候显示

Question

我有一个小 div 方块，如图 fiddle 所示。此 div 包含另一个 div（fiddle 中的第 9 至 17 行），只要出现问题（由 [=48= 执行]，此处不相关）就会显示：

                <div class="ui-state-default ui-widget-header plupload_header">
                  <div class="plupload_header_content">
                    <div class="plupload_logo"> </div>
                    <div class="plupload_header_title">Sélectionnez les fichiers (max. 80 Mo)</div>
                    <div class="plupload_header_text">Ajoutez des fichiers à la file d'attente de téléchargement et appuyez sur le bouton 'Démarrer l'envoi'</div>
                    <div class="plupload_view_switch" style="display: none;"><input type="radio" id="plupload_container_view_thumbs" name="view_mode_plupload_container" class="ui-helper-hidden-accessible"><label class="plupload_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" for="plupload_container_view_thumbs"
                        data-view="thumbs" role="button" title="Miniatures"><span class="ui-button-text">Miniatures</span><span class="ui-button-icon-secondary ui-icon ui-icon-image"></span></label></div>
                  </div>
                </div>

在相应的 css 中，有一个小片段（如下所示），除了其他 css 片段外，它还支持它。

.ui-state-default.ui-widget-header.plupload_header {
  z-index: 99999999;
  position: absolute;
  bottom: 59px;
  width: 98.7%;
  background: transparent !important;
  border-bottom-style: hidden;
  border-bottom-width: 2px;
}

问题

尽管底部灰色边框是隐藏的（根据 CSS），但我无法摆脱它（为了清楚起见，请参见下图）。即使它不是很明显，通过靠近屏幕检查它，您也会看到灰色边框。我怎样才能删除它？谢谢你的帮助。

FIDDLE

更新

div部分会在上传出现问题时显示错误信息（JS制作）。像这样：

可以看到上面那条灰线还在。

Answer 1

您在此处的 CSS 代码中使用了 !important：

div#plupload_container_dropbox {
    border: 2px solid #ff0051 !important;
    border-style: dashed !important;
    border-radius: 14px !important;
    z-index: 999999;
}

因此，您还必须使用 !important 覆盖边框底部。而且，你的覆盖必须在上面的代码之后。

div#plupload_container_dropbox {
    /* Add this */
    border-bottom: none !important;
}

PS。不要使用 !important 除非你真的非常需要。

Answer 2

ui-state-default ui-widget-header plupload_header 元素正在发生这种情况。要删除它，请使用 CSS:

.ui-state-default.ui-widget-header.plupload_header {
  display: none;
}

预览

Fiddle: https://jsfiddle.net/fogj98de/

Answer 3

只需使用border: none;

.ui-state-default.ui-widget-header.plupload_header {
  z-index: 99999999;
  position: absolute;
  bottom: 59px;
  width: 98.7%;
  background: transparent !important;
  border: none;
}

Border-bottom 在不应该显示的时候显示

Border-bottom showing when it should not

html

css

border