1

谁能帮我解决一些跨浏览器问题？我的网址是http://s423839726.onlinehome.us/index2.html。它在 Firefox 13 中看起来不错，但在 IE9 中，“联系人”按钮很不可靠。

另外，从哪里学习如何解决跨浏览器的不一致问题？

4

1 回答 1

0

这种不一致也可以在 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 搜索有关水平菜单的教程。那里有很多。祝你好运。

于 2012-07-24T19:32:04.897 回答