Question

我有一些与IE8无法正常运行的CSS。它适用于FF3，但是在IE8中，列表项之间有白框，整个过程都是错误的。

这是有问题的CSS

#golist {
    width:900px;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
}
#listing {
  list-style:none;
  margin:0;
  padding:0;
}
    #listing li {
        float:left;
        display:block;
        width:128px;
        background:#fff;
        border:1px solid #000000; 
        height:96px;
    }
    #listing li a {
        border:none;
    }
    #listing p {
        margin-bottom:0;
    }


    /* ---- show-hide elements ---- */

    #listing li .show{
        display:block;
        width:128px;
        height:96px;
    }
    #listing li .hide {
        color:#121212;
        text-align: left;
        height: 0;
        overflow: hidden;
        background-image:url(bghover.png);
    }
    #listing li:hover .hide, #listing li.over .hide {
        cursor: pointer;
        height: 96px;
        width:128px;
        text-align:center;
    }
    #listing li:hover .show, #listing li.over .show {
        height: 0;
        overflow: hidden;
    }

    #listing li a, #listing li a:visited, #listing li a:active {
        color:#121212;
        font-size:12px;
        text-decoration:none;
    }
    #listing li a:hover {
        color:#121212;
        text-decoration:none;

    }

以下是代码本身：

<div id=golist>
  <ul id=listing>
    <li class=show>
      <a href=#>
        <img src=images/image.jpg height=96px width=128px border=0>
      </a>
      <div class=hide>
        <a href=link.html>Link</a>
        <p>Some info</p>
      </div>
    </li>
  </ul>
</div>

这个想法是拥有一个带有图像的128x96盒子。在鼠标悬停时，会在图层上弹出一些文字。

Answer 1

您可以在此处找到：http://webdesign.about.com/od/internetexplorer/a/aa082906.htm

这是文章的一部分：

实际上很容易从IE 6中隐藏样式，但让标准兼容的浏览器可以看到它们。使用子选择器。

在我构建的一个设计中，我创建了一个需要边距和填充的双列布局。这意味着当我在IE 6中查看页面时，我遇到了盒子模型差异。我的第一个用于Firefox的CSS样式表包括这样一行：

div#nav { width: 150px; margin-left: 20px; }

这使得页面在Firefox和Safari中完美排列，但在IE中，导航栏被推到了右边太远了。

因此，我将该行转换为使用子选择器。 #nav div是body标签的子代，因此我将该行更改为：

body > div#nav { width: 150px; margin-left: 20px; }

当然，这样做会让#nav div失去IE中的所有属性，所以我需要添加一些IE样式才能让IE 6看起来不错。我将这一行添加到CSS：

#nav { width: 150px; margin-left: 10px; }

如果我的页面在Firefox和Safari中看起来不错，那么这一行CSS的放置非常重要。 IE系列需要先行。 Firefox和Safari将读取该行，然后它将被身体覆盖＆gt; div＃nav选择器在文档中较低。 IE 6将读取第一行并设置样式。然后它会忽略子选择器，因为它不能识别它们。当IE 7出现时，它将像Firefox和Safari一样。

首先设计符合标准的浏览器，然后修改CSS以支持IE的怪癖，花费更少的时间来摆弄设计并花费更多时间进行实际设计。

Answer 2

首先使用以下命令清除css文件中的所有默认填充和边距：

* { padding: 0; margin: 0 }

然后，您必须相应地调整代码，因为每个浏览器都会将自己的填充和边距添加到所有属性中。

一旦你在Firefox和Safari中对它感到满意，请使用条件语句来获取相应的IE样式表：

<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->

在样式表中，只覆盖需要覆盖的内容：

掌握CSS

.iframestyle { float: left; margin-right: 3px; width: 305px; }

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

（无论出于何种原因，IE 8可能需要重新声明宽度。）

IE / FF兼容性的Css问题

2 个答案: