CSS灰色空间突然出现答案

【问题标题】：CSS grey space appearing out of nowhereCSS灰色空间突然出现
【发布时间】：2014-09-06 04:32:08
【问题描述】：

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;
}

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

【问题讨论】：

您是否在标题上设置了background-color？如果没有定义，某些浏览器会使用灰色作为默认背景颜色。
这个贴在任何可以查看的地方吗？

标签： html css

【解决方案1】：

您应该能够通过将background-color: #fff; 添加到您的容器或包装器规则来解决此问题。

【讨论】：

【解决方案2】：

您似乎需要将标题中的background-color 设置为页面其余部分的颜色。

这里有一个 jsfiddle 来查看样式：link

【讨论】：

【解决方案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 }

将完成工作

【讨论】：

看你的照片我不太明白，你能粘贴你的 css 源代码吗，来自 firebug 或类似的_你呢#container 呢？

【解决方案4】：

尝试在 Chrome 中检查 DOM 和样式

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

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

【讨论】：

图片：dropbox.com/s/kdd8jxbqw62l6wh/…
我用 CSS 更新了我的答案以解决您的问题。这是您需要更改的属性： background-image: transparent !important;