有IE错误的问题 - CSS

Question

我借用了Css Globe的简易滑块，但我修改了它以便在页面上进行布局。

 /* 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幻灯片导航（1,2,3,4）在它们应该按照彼此接近的顺序排列时广泛传播。查看它们广泛传播的示例。

知道它为什么表现奇怪吗？谢谢！

Answer 1

在IE8中进行测试。

你有这个：

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

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

如果这个CSS文件是IE7（由于上述内容而“是”），那么这个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
}