<li>在IE上看起来奇怪</li>

时间:2011-02-28 18:31:33

标签: css internet-explorer html-lists

我在IE上遇到“li”的问题。 “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 个答案:

答案 0 :(得分:1)

不幸的是,“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")
}

根据需要更改位置以移动它以平衡。

答案 1 :(得分:0)

您是否尝试过运行CSS重置,以防标准化<li>等元素?

正如@Matt Gibson所提到的,您需要添加<!DOCTYPE>