DIV 在 FF + Opera 中无法识别，在 IE + Chrome 中有效

Question

在过去的几天里，我一直在努力克服这个问题，因为我只想让这个网站现在就启动。上周左右我一直在开发这个，我一直在使用我特别喜欢的浏览器，谷歌浏览器。是的，大错特错！

无论如何，这里是演示站点，它展示了我想要的所有东西的外观（对于一些不合适的东西，还没有完全完成表示歉意！）：http://www.weburton.co.uk/content/demo/

你看到社交区域了吗？它在 Chrome 中正确显示；正是我想要的。在 IE 中它显示 div 区域，但存在一些样式问题，例如 Twitter 端的文本。

但是，在其他浏览器中似乎完全忽略了 div 区域；这是一个奇怪的问题，我承认。我将它们封装在一个具有背景图像（selenasocial）的 div 中，然后让其他 div 浮动。这是代码（CSS）：

#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
    display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none; 
    overflow:auto;}

.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
    display: inherit;
width: 100%;
min-height: 263px;
    z-index: 255;
border: none; 
    overflow:auto;}

.selenasocial img {
border: none;}

.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}

.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}

这是 HTML，我正在使用小部件（是的，它们在 functions.php 中已正确设置样式）：

<!-- Selena Gomez Social Networks -->

<div class="selenasocial">


<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php   endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php   endif;?>
</div>

通过将上面的 CSS 复制到单独的 IE.css 文件中，我克服了 IE 中的错误（因为它也发生在那里）。我只是不明白为什么两个领先于 IE 的浏览器没有从主 CSS 文件中读取。

非常感谢任何帮助 - 在过去的几天里，我一直在为此烦恼。

提前致谢！

Answer 1

您的代码（技术上）没有问题 - 您发布的部分。您将两个 float 属性都设置为 left，我猜这不是您想要的，但这并不能解释为什么其他属性被忽略。

我不会阅读您的 4700 行 CSS 文件来找出其中的问题，但我会尽力帮助您自己解决问题。

我做的第一件事是尝试寻找你用 firebug 发布的 CSS 代码，令我惊讶的是，它不存在。 CSS firefug 给我的最后一行是第 902 行：

    .clearfix {
        zoom: 1;
    }

实际上，萤火虫没有显示缩放的东西（括号是空的）。于是我直接去css文件中查找，想知道为什么有人会使用这种非标准化的属性，我检查了下一行，发现第907行有一个括号而不是括号。

在发现此类错误后，我继续在您的 CSS 文件上运行 CSS validator，结果不是很好。修复这些错误，Firefox 会正确绘制。

这里不讨论判断 IE 和 Chrome 解释错误 CSS 文件的能力究竟是好是坏，但学习如何查找和纠正错误可以帮助您在更严格的浏览器上工作。