HTML 列表与 chrome 分崩离析

标签 html css

以下代码在 firefox 上运行良好,但在 chrome 上运行不佳:

http://jsfiddle.net/4tYfY/4/

<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: "";
}

最佳答案

添加:

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

Demo

关于HTML 列表与 chrome 分崩离析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20840328/

相关文章:

html - CSS "crop"图像,但垂直居中对齐

javascript - 一旦 div 中的内容发生更改,就重新加载页面中的 javascript

css - wordpress 中的自定义 css 样式但不起作用

asp.net - 溢出 :hidden makes data disappear in IE

javascript - 如何在 for 循环中使用 .getElementsByClassName() 来隐藏 HTML 元素

javascript - 悬停时旋转图像失败

html - 在 DIV 中设置 SPAN 样式

html - 位置 : sticky is back in Chrome 56, 但元素不可见?

html - 按一个按钮到 css div block

javascript - 在索引 html 顶部弹出登录表单