Question

过去几天我尝试并努力克服这个问题，因为我只是想让这个网站现在首先推出。我在上周左右开发了这个，我一直在使用我特定的首选浏览器Google Chrome。是的，大错！

无论如何，这是一个演示网站，它显示了我想要的东西，看起来像什么（对某些不合适的东西道歉，尚未完成！）：http://www.weburton.co.uk/content/demo/

你看到社交区吗？它在Chrome中正常显示;完全按照我的意愿。在IE中它显示div区域，但是有一些样式问题，例如Twitter方面的文本。

但是，div区域在其他浏览器中完全被忽略了;这是一个奇怪的问题，我承认这一点。我把它们包裹在一个有背景图像的div中（selenasocial）然后让其他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，我正在使用Widgets（是的，它们已在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

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

我不会读你的4700行CSS文件来查找它有什么问题，但我会尽力帮你自己做。

我做的第一件事就是尝试使用firebug搜索你发布的CSS代码，令我惊讶的是，它并不存在。 CSS firefug的最后一行给了我第902个就是这个：

    .clearfix {
        zoom: 1;
    }

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

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

决定IE和Chrome是否能够解释错误的CSS文件实际上是好还是坏，这里不讨论，但学习如何找到并纠正错误可以帮助您使用更严格的浏览器。

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

1 个答案: