在 Mozilla 中为内容添加了额外的填充答案

【问题标题】：Extra padding is added in mozilla for content在 Mozilla 中为内容添加了额外的填充
【发布时间】：2015-04-02 04:42:12
【问题描述】：

下面是我的代码：

#sam_ul li {
  height: 41px;
  border-bottom: 1pt solid #DEDEDE;
  background-color: #F8F8F8;
}
#sam_ul li {
  list-style-type: none;
}
#u_l_add:before {
  content: '\0FBF';
}

<ul id="sam_ul" style="margin:0px;">
  <li>
    <a href="#">
      <span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
      <div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
    </a>
  </li>
  <li>
    <a href="#">
      <span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
      <div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
    </a>
  </li>
</ul>

内容伪元素在 IE 和 Mozilla 中的显示方式不同。不同的是，我的意思是在IE 中它可以正确显示，而在 Mozilla 中它正在添加一些额外的填充并显示内容。

检查第一个 li 元素和第二个 li 元素之间的区别。

谁能帮我解决这个问题？

【问题讨论】：

在添加之前重置元素样式是避免浏览器特定样式的最佳方法。尝试为块级元素（如 p、div、标题标签、ul、ol、li、......
当你说“mozilla”时，你的意思是“Firefox”你真的在使用Mozilla Suite吗？
我的意思是 Firefox ..不是 mozilla 套件..

标签： html css internet-explorer html-lists mozilla

【解决方案1】：

尝试使一切正常化。 HTML 和 body 对每个可能破坏您的设计的浏览器都有默认的边距和填充。几乎所有的块元素都有。

试试：

html,body{
margin: 0;
padding:0;
}

或者下载并添加 normalize.css

【讨论】：

还是一样..问题在于使用伪元素显示的内容：之前..如果我删除显示工作正常的伪元素，但我想要伪元素显示出来。
嘿，为什么不尝试使用 ::before 而不是 :before。我发现 ':' 用于样式，而 '::' 用于结构更改。
但 IE8 不完全支持 ::before 即使在 mozilla 中替换后问题仍然存在..

【解决方案2】：

将padding:0 添加到unordered list

#sam_ul{
    padding:0
    }
#sam_ul li {
    height: 41px;
    border-bottom: 1pt solid #DEDEDE;
    background-color: #F8F8F8;
    list-style-type: none; 
}

#u_l_add:before {
    content: '\0FBF'; }

#u_l_sear:before {
    content: '\0FBF'; }

<body>
<ul id="sam_ul" style="margin:0px;">
    <li>
        <a href="#">
            <span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
            <div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
            </a>
        </li>
        <li>
            <a href="#">
                <span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
                <div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
            </a>
        </li>
    </ul>
</body>

【讨论】：

谢谢.. 但问题仍然存在.. 你能在 mozilla 和 IE 中运行这段代码 sn-p 吗.. 你会知道区别.. [我使用的是 IE8]。跨度>
在 firefox 和 chrome (macosx) 上运行良好，我没有使用 PC 抱歉。发一些截图怎么样？
对不起..但只有10声望的人才能上传图片..所以不能上传它们