Question

我有一个小div块，如fiddle所示。这个div包含另一个div（小提琴中的第9到17行），只要有问题就会显示（由javascript执行，这里不相关）：

                <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

ui-state-default ui-widget-header plupload_header元素正在发生。要删除它，请使用此CSS：

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

预览

小提琴：https://jsfiddle.net/fogj98de/

Answer 2

只需使用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;
}

Answer 3

您在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。

边框底部显示它不应该

3 个答案: