Question

https://www.dropbox.com/s/xy44636b2a1tbu8/Screenshot%202014-09-05%2011.46.12.png?dl=0

我左边有一个徽标，下面是带链接的标题。正如你在图片中看到的那样，右上方有一大堆灰色空间。

以下是样式和标记：

<div class="container">
    <div id="wrapper">
        <div id="header">
            <div id="identity">
                <a href="#"><img src="../i/logo.png" /></a>
            </div>
        </div>

        <div id="navWrap">

            <ul id="nav">

            </ul>

        </div>
    </div>
</div>

CSS：

#wrapper
{
position: relative;
width: 1120px;
margin: 0 auto; 
}
#header
{
height: 121px;
width: 1155px;  
position: relative;
z-index: 100;
}
#identity
{
z-index: 502;
float: left;
height: 85px;
width: 230px;
}

为什么这会导致灰色空间？如果您还需要其他任何东西来调试此问题，请告诉我。

Answer 1

您应该可以通过向容器或包装器规则添加background-color: #fff;来解决此问题。

Answer 2

看起来您需要在标题中将background-color设置为页面其余部分的颜色。

这是一个了解样式的方法：link

Answer 3

除了你提到的样式表，他们可能是另一个覆盖#wrapper #header #identity元素的样式表，尝试萤火虫;

如果它不在CSS中，那可能是javascript正在改变#identity样式

无论如何添加

 #wrapper,#header,#identity{
 background-color:#fff !important }

或

 #wrapper,#header,#identity{
 background-color:none !important }

或

#wrapper,#header,#identity{
background-color:transparent !important }

将完成工作

Answer 4

尝试在Chrome中检查您的DOM和样式

https://developer.chrome.com/devtools/docs/elements

#header {
    background-color: #fff !important;
    background-image: transparent !important;
}

CSS灰色空间无处不在

4 个答案: