html - 有 IE 错误问题 - CSS

Question

我借用了 Css Globe 的 easy slider，但我将其修改为在页面上进行布局。

 /* numeric controls */ 



ol#controls{
  margin:0.2em 1em;
  padding:0;
  height:16px;
  float:right;
  font-size:x-small;
  font-family: Arial, Verdana, Default;
  font-weight:normal;
 }

 ol#controls li{

  padding:0;
  float:left;
  list-style:none;
  height:16px;
  width:20px;
  background:yellow;
  margin:10px;
 }

 ol#controls li a{
  height:16px;
  line-height:18px;
  border:1px solid #ccc;
  background:#FFFFFF;
  color:#555;
  padding:0 5px;
  text-decoration:none;
  float:right;
 }

 ol#controls li.current a{
  background:#736357;
  color:#fff;
 }
 ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

我想不通 - IE7/8 slideshow navi (1,2,3,4) 广泛传播，而它们本应彼此紧密排列。请参阅它们广泛传播的示例。

知道它为什么表现怪异吗？谢谢!

Answer 1

在 IE8 中测试。

你有这个:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

这使得 IE8 的行为就好像它是 IE7 - 这不是很好，但这不是问题。

如果它是 IE7(由于上述原因它"is")，您仅包含此 CSS 文件:

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="css/homepage_css/hpie7.css" />
<![endif]-->

在 hpie7.css 的第 75 行，你有这个:

ol#controls li{
    margin:10px 100px 0 0; 
    padding:0;
    float:left;
    list-style:none;
    height:16px;
    line-height:18px; 
}

如果删除 margin行，数字将再次靠在一起而不是 100px分开。

看起来你必须(在同一个文件中，所以它只适用于 IE7)向 <ol> 添加宽度像这样:

ol#controls{
    ..
    width: 100px
}