0

我一直在尝试解决我网站上的导航问题。(sequoiawaste.com) 问题出现在 iPhone 和 Internet Explorer 7 上。我使用display:table-cell;CSS 属性将选项卡保持在一行中。但是，似乎有两个问题：

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

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

#globalnav据我所知， enhanced.CSS 文件中定义的属性很少，可能会导致该问题。

我注意到的是，显示值因状态而异——从表格到表格单元格，然后到块。将它们中的任何一个（或全部更改为相同的显示器）只会让我的问题变得更糟。

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

** 更新 **

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

嗯。有小费吗？

4

1 回答 1

0

试试float: left吧——这有更好的跨浏览器支持。您还需要设置每个项目的宽度，可能还需要设置一些其他属性以使其再次看起来不错。

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

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

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

于 2012-06-14T19:17:46.247 回答