Question

有人可以帮我解决一些跨浏览器问题吗？我的网址是http://s423839726.onlinehome.us/index2.html。它在firefox 13中看起来很好，但在IE9中，“联系人”按钮都很不稳定。

此外，在哪里学习如何修复跨浏览器的不一致性？

Answer 1

在Opera中也可以看到不一致。你的问题是UL元素。它挂在右侧的那个位置，因为它显示“内联”设置并包含一个迷路A元素。此组合会使您的联系人菜单元素略微下移。您应该尝试清理标记，因为它包含非必要的嵌套元素（主要是A元素）。另一个问题是，你混合左右浮动。此外，您正在混合左右填充和边缘，这可能会导致浏览器中的不同行为，使计算更加困难，并可能导致边距问题崩溃。我建议你为你的菜单尝试更多的语义标记，如：

<ul id="topnav">
    <li><a href="about.html">About</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

使用这个简单的标记，您可以设置菜单样式。如果你达到一个点，调整尺寸，填充和元素的边距不足以按照你想要的方式设置东西，你可能会开始在LI或A元素中引入非语义元素（例如SPAN元素）以获得更多的方法通过CSS改变现状。

获取导航样式的一种简单方法如下：将每个LI浮动到左侧，仅使用左边距/填充来创建可视空间。

ul {
    list-style-type: none;
    height: 60px;
    width: 300px;
    margin: auto;
}

li {
    float: left;
}

ul a {
    padding-right: 32px;
    padding-left: 32px;
    display: block;
    line-height: 50px;
    text-decoration: none;
    font-size: 40px;
    color: #ccc;
}

ul a:hover {
    color: #fff;
}

这样的事情。左边界仍然缺失。您的整个菜单块（UL）应使用左侧填充或右侧浮动或其他方式定位到右侧。如果要减少在页面上其他位置更改UL和LI样式，请使用#topnav为选择器添加前缀。这只是一个简单的插图，您不需要太多标记或样式来获得您想要的水平菜单。从简单开始，使用UL / LI在水平菜单上搜索教程。那里有很多。祝你好运。

不知道如何解决跨浏览器问题

1 个答案: