跨浏览器的网站导航CSS

Question

我一直在尝试对我网站上的导航进行问题排查。 （sequoiawaste.com）问题出现在iPhone和Internet Explorer 7上。我使用display:table-cell; CSS属性将标签保持在一行中。但是，似乎有两个问题：

1）在移动设备（特别是iPhone，但不包括iPad）上，该行超出了蓝色背景，并且笨拙地隐藏了我页面的搜索功能。

2）在IE 7上，它忽略display:table-cell;并实际上垂直定向链接，类似于table-row将创建的链接。

据我所知，在enhanced.CSS文件中只有少数属性可以定义#globalnav，这可能会导致问题。

我注意到的是显示值因状态而异 - 从Table，Table-cell到Block。将它们中的任何一个（或所有这些都改为同一个显示器）只会让我的问题变得更糟。

有没有人对这里做什么有一些指示？我不认为这是一个非常困难的问题，我只是在这里碰壁。

**更新**

我开始使用float:left，但这是一把双刃剑 - 它看起来更好，但为了得到类似的格式，我必须将每个锚设置为特定的宽度。现在，当您单击我的搜索栏时，它不会动态调整锚点的大小。

HRMM。有小费吗？

Answer 1

尝试使用float: left - 这有更好的跨浏览器支持。您还需要设置每个项目的宽度，以及其他一些属性，以使其再次看起来很好。

---

编辑：是的，使用float: left会导致导航元素单独停止调整大小。如果不使用浏览器的表格布局算法，这可能很难做到。您可以尝试其他几种方法：

• 当您为搜索栏宽度设置动画时，还会同时为所有导航项的宽度设置动画（但这可能会很慢）
• 实际上使用一个表（这不是标记和表示的很好分离，但有时CSS是有限的）
• 使用条件注释“欺骗”IE呈现表格（请参阅https://stackoverflow.com/a/4193681/106302）了解详情（但这并未解决移动设备的问题）

根据您选择的方法，您可能仍需要为移动设备提供特殊规则。我喜欢这种效果，但采用不同的设计可能更实际。