Почему этот неупорядоченный список по-разному форматируется в IE7? - PullRequest
Новая
       16

Почему этот неупорядоченный список по-разному форматируется в IE7?

1 голос
/ 13 мая 2010

Мне лучше заставить вещи выглядеть хорошо в IE8, FF и Safari, но IE7 все еще бросает в меня кривые шары ...

Пожалуйста, проверьте эту страницу и прокрутите вниз под панелью навигации: http://rattletree.com/instruments.php

Это должно стать очевидным при просмотре в FF против IE7. По какой-то причине форматирование списка толкает элементы списка вниз на странице ... какие-нибудь советы? 

<ul class="instrument">

      <li class="imagebox"><img src="/images/stuff.jpg" width="247" height="228" alt="Matepe" /></li>
      <li class="textbox"><h3>Matepe</h3><p>This text should be to the right of the image but drops below the image in IE7</p></li>
 </ul>

CSS: 

ul.instrument {
   text-align:left; 
     display:inline-block;

}

ul.instrument li {
   list-style-type: none;
     display:inline-block;

}

li.imagebox {
 display:inline;    
 margin:20px 0; 
 padding:0px;
 vertical-align:top;

}

li.imagebox img{
 border: solid black 1px;
}

li.textbox {
 display:inline;     
}

li.textbox p{
margin:10px;
    width:340px;
    display:inline-block;   
}

1 Ответ

1 голос
/ 14 мая 2010

в основном эта строка ul.instrument li { перебирает li.imagebox etc.

так что вы можете сделать это:

CSS: 

ul.instrument {
    text-align:left; 
    display:inline-block;
}
ul.instrument li {
    list-style-type: none;
    display:inline-block;
}
ul.instrument li.imagebox {
    display:inline;    
    margin:20px 0; 
    padding:0px;
    vertical-align:top;
}
ul.instrument li.imagebox img{
    border: solid black 1px;
}
ul.instrument li.textbox {
    display:inline;     
}
ul.instrument li.textbox p{
    margin:10px;
    width:340px;
    display:inline-block;   
}

В основном то, что я сделал, вместо того, чтобы объявить li.imagebox Я использовал ul.instrument li.imagebox так что это объявление не будет переопределено этим объявлением ul.instrument li

Надеюсь, это поможет:)

Изменить, вот еще один вариант, но этот подход отличается, он использует float

CSS: 

ul, li, h3, p { margin: 0; padding: 0 }
ul, li { list-style: none }
ul.instrument { overflow: hidden}
ul.instrument li, ul.instrument li img { float: left; }
ul.instrument li.imagebox { margin:20px 0;  }
ul.instrument li.imagebox img { border: 1px solid black }
ul.instrument li.textbox p { margin: 10px; width: 340px }

но этот работает во всех браузерах, обещаю: D. В основном первые две строки сбрасывают использованные вами элементы, чтобы они выглядели одинаково во всех браузерах.

...