IE / FF兼容性的Css问题

I have some CSS that doesn't behave correctly with IE8. It works fine with FF3, but in IE8 there are white boxes in between the list items and the whole thing is buggy.

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

here is the css in question

这是有问题的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;

    }

And here is the code itself:

这是代码本身:

<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>

The idea is to have a 128x96 box with an image. On mouseover, a layer pops up over it with some text.

我们的想法是拥有一个带有图像的128x96盒子。在鼠标悬停时,会在其上弹出一些带有文本的图层。

2 个解决方案

#1

Start by clearing all of the default padding and margins in your css file using:

首先清除css文件中的所有默认填充和边距:

* { padding: 0; margin: 0 }

Then you'll have to adjust your code accordingly as every browser adds its own padding and margins to all attributes.

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

Once you get it to the point where you're happy with it in Firefox and Safari, use conditional statements to pull in the appropriate IE stylesheet:

一旦你在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]-->

In your stylesheets only override what needs overriding:

在样式表中,只覆盖需要覆盖的内容:

Master 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; }

(For whatever reason IE 8 may need a redeclaration of width.)

(无论出于何种原因,IE 8可能需要重新声明宽度。)

#2

Here you can found about this: http://webdesign.about.com/od/internetexplorer/a/aa082906.htm

在这里你可以找到这个:http://webdesign.about.com/od/internetexplorer/a/aa082906.htm

This is a part of the article:

这是文章的一部分:

It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.

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

In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:

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

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

This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.

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

So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:

所以,我将该行转换为使用子选择器。 #nav div是body标签的子代,所以我将行更改为:

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

Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:

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

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

The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.

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

By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.

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

#1