Question

以下代码与firefox运行良好，但与chrome分开：

<body>
    <div id="footer"><ul>
<li class=""><a href="rolunk">1</a></li>
    <li class=""><a href="hotelek">2</a></li>
    <li class=""><a href="apartmanok">3</a></li>
    <li class=""><a href="impresszum">4</a></li>
    </ul>
<div class="clearfix"></div></div>
</body>

.clear, .clearfix{clear:both;}

#footer
{
    background-image: url('../images/footerLoopBg.png');
    height: 70px;
    line-height: 70px;
    text-align: center;
    vertical-align: middle;
    font-family: georgia;
    font-size: 1.1em;
    width: 100%;
}

#footer ul li
{
    display: inline-block;
    padding: 0px;
}
#footer ul li a
{
    color: #DB9FBD;
}
#footer li:after
{
    content: '|';
    padding: 5px;
    color: #DB9FBD;
}
#footer li:last-of-type:after {
    content: "";
}

Answer 1

添加：

#footer ul li { vertical-align: top;}

Demo

Answer 2

DEMO

#footer ul li
{
    display: inline;
    padding: 0px;
}

Answer 3

我发现您可以添加以下两项内容：

    #footer ul li 
       { 
         vertical-align: top;
       }

或删除

content: "";

Answer 4

此处的问题是当您删除最后一项的content时：

#footer li:last-of-type:after {
  content: "";
}

以更好的方式试试这个：

#footer li:last-of-type:after {
  display:none;
}

演示 http://jsfiddle.net/4tYfY/24/

Answer 5

你不需要改变CSS。你的CSS没有错。你的HTML有问题。见下面的代码

<body>
<div id="footer">
    <ul>
        <li class="">   <a href="rolunk">1</a></li>
        <li class="">   <a href="hotelek">2</a></li>
        <li class="">   <a href="apartmanok">3</a></li>
        <li class="">   <a href="impresszum">4</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

检查这个小提琴here。我没有改变任何CSS。

Answer 6

代码中的问题是最后一个li元素仍然具有：after伪元素。所以，即使后面的元素没有“|”，它仍然是一个元素宽度为5px的填充。

为了解决问题：

#footer li:last-of-type:after {
  display: none;
}

HTML列表因chrome而分崩离析

6 个答案: