css - <li> 在 IE 上看起来很奇怪

标签 css internet-explorer html-lists

我在 IE 上遇到“li”的小问题。 “li”没有显示为 block ,“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;
  }

最佳答案

不幸的是,“list-style-image”只会给我的 friend 带来痛苦。将它换成 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")
}

根据需要更改位置以使其四处移动以达到平衡。

关于css - <li> 在 IE 上看起来很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5146031/

相关文章:

css - Symfony2 : background color of date widget

html - 将引用 SVG 图像嵌入 HTML 文件

html - 围绕自定义 li 元素符号创建 CSS 边框

c# - 如何在 .net 中获取对 Internet Explorer 窗口句柄的引用

c# - 如何设置 ActiveX 控件名称

css - 仅在单击时展开 float 的 LI,而不是任何其他 li

css - 根据内部列表元素的数量调整 div 宽度

css - 路由的不同 css 样式表

html - 外部固定背景图像不显示

internet-explorer - Internet Explorer 11 : Memory Leak on blank page?