Есть проблема с ошибкой 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 (что он и есть "из-за вышеизложенного):

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

On ~ Line 75 ofhpie7.css, у вас есть это:

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
}