Question

我今天大部分时间都在努力弄清楚为什么我网站上的css在IE7中无法正常工作。您可以在http://www.ecocamel.com

看到该网站

当您使用淋浴喷头登上产品卷轴页面时。 ..一切都很乱，鼠标悬停弹出部分显示没有任何鼠标悬停，产品从容器流出到右边..

我尝试添加overflow：hidden和position：relative，它确实修复了很多..但是它导致网站切掉了其他浏览器上左/右箭头的一部分......

所以我现在已经删除了所有内容。只是激怒它在其他所有浏览器上都能完美运行。如何在不影响其他浏览器的情况下找出最佳修复方法？我想我可以添加溢出：隐藏/位置：相关的东西与条件IE7语句，所以它不会影响其他浏览器..但仍然无法正确解决问题。

Answer 1

一个好方法是使用条件评论你可以使用：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

在这种情况下，在html标记上放置额外的类，以便为IE6 / 7/8显式设置样式

像：

div {color:#ff00ff}
.ie7 div {color:#00ff00;}

Answer 2

在使用条件IE7语句的情况下，虽然这似乎是一种废话方式，但如果这是唯一的替代方案而不重写CSS那么这是最好的解决方案。

正如GordonM所提到的，我们很难在不看代码的情况下知道发生了什么。但是当你使用position:relative时，我可能会建议尝试使用z-index，以便弹出窗口显示在所有内容之上（就像他们应该这样做）。

除此之外，您是否正确地遵循了CSS框模型？我倾向于在创建div或p标记时编写这些基本语句：

    div {
      float:left;
      width:100%;
      margin:10px;
}

这是跨浏览器兼容的，因为我曾经为希望他们的网站只为所有浏览器使用一个CSS文件的代理商工作。可以使用HTML和CSS构建一个网页，并使其适用于每个浏览器（不包括IE6），而无需使用条件语句。但是，当我认为你已经/即将结束开发时，你无法完全重写你的CSS。因此，首先尝试z-index的想法，然后尝试将上述代码应用于任何受影响的div。

Answer 3

谷歌“IE的条件css”，你会发现很多教程向你展示如何只为IE版本x +创建条件CSS，或者特别是ie ..甚至包括IE的所有浏览器。大多数网站需要一些，如果不是大量的IE调整。另外，查看reset.css将所有边距和填充设置为0以帮助保持一致性。

为什么我的CSS无法在IE7上正确显示？其他一切都运转正常

3 个答案: