如何解决表列太窄的问题?

时间:2010-08-10 13:56:58

标签: html css

我是这个特定项目的新手,我的任务是解决IE8中出现的问题。

如果您查看http://funds.ft.com/ETFHomepage.aspx,则会有一个名为“新闻”的部分。在该部分中,有一个名为“最受欢迎的ETF”的专栏。这应该与“最近查看的ETF”列的宽度相同。

作为参考,此页面在Firefox中正确显示。有人可以指出我可以用CSS做什么或(其他一些方法)*解决这个问题吗?

*我知道解决此问题的最佳方法是废弃可怕的设计并正确实施! :-) - 我们现在正在这样做。这是一项很大的工作,所以需要很长时间。但与此同时,我们必须修复出现的错误。感谢

更新:只是为了注意我对Hristo所说的话,“我认为问题在于左边的表格(而不是嵌套表格)。中心的桌子有宽度由图像定义,右边的表没有图像,所以它被压碎了“

1 个答案:

答案 0 :(得分:1)

这种情况发生的原因是因为您在“Alphaville:克服沃尔克规则,ETF”标题下的网址。由于url中没有空格,因此表会尝试为其提供空间。所以有几种方法可以解决这个问题:

  1. 纯文本网址不会出现在网页上(特别是当它们不在锚标签中时,您可以点击它们。)您是否可以更新内容以便您没有原始网址在你的内容?

  2. 如果您必须能够处理没有空格的长行文本,那么您需要弄清楚如何更改页面的布局,以便强制文本换行或剪辑以适合容器。尝试将“table-layout:fixed”放在表格上,以强制根据表格的规格(而不是内容)调整列宽。 Firefox似乎是在网址中包含破折号和斜杠,而IE只想包裹网址中的破折号。

  3. 我想说你的布局很好,你只需要修复内容生成,因此它不包含任何长文本网址(上面的选项1)

    编辑:如果您决定使用上面的选项2,那么请查看css规则“word-break:break-all”。它只是IE,它会在文本到达容器末尾时强制中断。对文字不好,但它适用于网址。因此,您无法将其应用于整个新闻表,但您可以只包含包含该URL的单元格。