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

【问题标题】：don't know how to fix cross-browser problems不知道如何解决跨浏览器问题
【发布时间】：2012-07-23 03:53:12
【问题描述】：

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

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

【问题讨论】：

另外，我注意到在其他几个浏览器中，我的社交链接位于徽标顶部，而不是位于我想要它们的左侧。有什么想法吗？
你的问题很模糊。您应该隔离行为不同的代码的特定示例并询问这些示例。

标签： testing cross-browser internet-explorer-9

【解决方案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 搜索有关水平菜单的教程。那里有很多。祝你好运。

【讨论】：