<li> выглядит странно на IE - PullRequest
Новая
       24

<li> выглядит странно на IE

1 голос
/ 28 февраля 2011

У меня небольшая проблема с "li" в IE. «Li» не отображаются как блоки, а «list-style-image» тоже не работает. Я искал всю сеть, и я не нашел ничего похожего .. На FF, Chrome и Safari результат довольно хороший ..

Спасибо за любую помощь. Ниже мой HTML и IE CSS: 

 <html>
  <head>
   <title>IE test</title>
   <link rel="shortcut icon" type="image/x-icon" href="content/images/">

   <link rel="stylesheet" type="text/css" href="content/css/alerts_rev00.css">
   <!--[if gte IE 7]>
   <link rel="stylesheet" type="text/css" href="content/css/alertsIE_rev00.css" />
   <![endif]--> 

  </head>

  <body>
    <div id="error_msg">
     <ul>
      <li>Please, fill the "adress" field.</li>
      <li>Please, chose an username containing 4 character, at least.</li>
     </ul>
    </div>
  </body>
 <html>

 body {
  margin: 0px;
  padding: 20px;
  }

 #error_msg ul {
  position: relative;
  width: 476px;
  margin: 0px 0px 20px 0px;
  background-color: #ffeaea;
  list-style-image: url("http://www.dvertr.com/content/images/dvertr_erro_icone.png");
  border-bottom: solid 1px #ef404a;
  color: #ef404a;
  text-align: left;
  }

 #error_msg ul li{
  display: block;
  line-height: 25px;
  font-family: georgia, times, serif;
  font-size: 12px;
  font-style: italic;
  text-decoration: none;
  }

Ответы [ 2 ]

1 голос
/ 28 февраля 2011

К сожалению, «list-style-image» приведет только к боли и страданиям моего друга. Поменяйте его на фоновое изображение на LI. Гораздо проще для рендеринга в браузерах. 

li {
   padding: 0 0 0 20px;
   background-repeat: no-repeat;
   background-position: 2px 2px;
   background-image: url("http://www.dvertr.com/content/images/dvertr_erro_icone.png")
}

Измените положение, чтобы переместить его, чтобы сбалансировать при необходимости.

0 голосов
/ 28 февраля 2011

Вы пытались запустить CSS Reset на всякий случай, чтобы стандартизировать свои элементы, такие как <li> и другие?

Кроме того, как упомянул @Matt Gibson, вам нужно добавить <!DOCTYPE>

...