伪元素：在 IE9 和 Firefox 的绝对位置问题之前，Chrome 是可以的答案

【问题标题】：pseudo-elements :before absolute position issue in IE9 and Firefox, Chrome is OK伪元素：在 IE9 和 Firefox 的绝对位置问题之前，Chrome 是可以的
【发布时间】：2012-02-05 19:36:10
【问题描述】：

我正在使用 :before 来制作自定义项目符号（参见示例 http://jsfiddle.net/cHqRd/1/），它在 Chrome 和 Firefox 中运行良好，但在 IE9 和 Firefox 中却不行

在 Chrome 中检查此示例，然后在 IE9 和 Firefox 中查看差异http://jsfiddle.net/cHqRd/1/

项目符号在 IE9 中下降

HTML

<ul>
        <li> XSmall = UK 8</li>
         <li> Small = UK 10, Medium</li>
         <li> Medium = UK 12</li>
          <li> Large = UK 14</li>
          <li> small</li>
          <li> 179cm/ 5'11"</li>
 </ul>

CSS

 li {font-size:1.6em;
    list-style:none; 
    position:relative; 
    padding-bottom: 0.6%;
padding-top: 0.8%;}

 li:before {
  position: absolute;
  top: 0.1em;
margin: 27% 0 0 -3.6%;
    /* accommodate Camino */
    vertical-align: middle;
    display: inline-block;
    content: "";
    display:block;
    width:0.4em;
    height:0.4em;
    background: #6d6d6d;
    border-radius: 0.4em;
    box-shadow: inset 1px 1px 1px rgba(0, 0 ,0, 0.4);
}

【问题讨论】：

在 Firefox9 中与 IE9 中的行为相同。
@scessor - 谢谢我更新了问题

标签： css internet-explorer-9 cross-browser css-position

【解决方案1】：

问题是li:before定义中的margin，替换

top: 0.1em;
margin: 27% 0 0 -3.6%;

与

top: 0.5em;
left: -1.0em;

我无法用 IE9 进行测试，在 Firefox9 中它可以工作。另请参阅您的updated example。

【讨论】：