-1

我今天大部分时间都在试图弄清楚为什么我网站上的 css 在 IE7 中不能正常工作。您可以在http://www.ecocamel.com上查看该网站

当您使用淋浴喷头进入产品滚动页面时。..一切都是一团糟，鼠标悬停弹出窗口部分显示没有任何鼠标悬停，并且产品从容器中流出到右侧..

我尝试添加溢出：隐藏和位置：相对，这确实解决了很多问题..但它导致网站在其他浏览器上切断了部分左/右箭头......

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

4

3 回答 3

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;}
于 2012-08-17T14:24:33.507 回答
0

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

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

除此之外，你是否正确地遵循了 CSS 盒子模型？我倾向于做的是在创建divorp标记时编写这些基本语句：

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

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

于 2012-08-17T14:22:00.043 回答
0

Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.

于 2012-08-17T14:24:54.223 回答