0

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

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

你看到社交区域了吗？它在 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 文件中读取。

任何帮助将不胜感激 - 在过去的几天里，我一直在为此烦恼。

提前致谢！

4

1 回答 1

0

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

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

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

    .clearfix {
        zoom: 1;
    }

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

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

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

于 2012-06-21T22:35:48.893 回答