Question

以下是我的代码：

#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元素之间的差异。

任何人都可以帮我吗？

Answer 1

将padding:0添加到unordered list

＆＃13;

#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'; }

＆＃13;

<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>

＆＃13;

Answer 2

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

尝试：

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

或者下载并添加normalize.css

mozilla中添加了额外的填充内容

2 个答案: