在 IE7 中，表格左侧的填充不起作用

Posted 2023-03-06

【中文标题】在 IE7 中，表格左侧的填充不起作用

【英文标题】：Padding-left around table not working in IE7

【发布时间】：2012-07-24 05:01:57

【问题描述】：

我有一个嵌入在 div 中的表格，图像浮动在它的左侧。我使用 padding-left 在图像和表格之间添加一些空间。它在大多数浏览器中都可以正常工作，但在 IE7 中，表格正在触摸图像。当我检查元素时，填充与表格重叠，而不是在表格的左侧。

我尝试用最小的小提琴复制它，但我的尝试在所有浏览器中都遇到了这种不当行为，所以我不确定真实页面上有什么不同。

真正的页面是：

http://dev.bridgebase.com/barmar_test/lessons/index-so.php?cat_id=3

我关心的间距在“Title:”的左边。

尝试的小提琴是：

http://jsfiddle.net/barmar/HaCgF/4/

如何在所有浏览器中保持一致的间距？

【问题讨论】：

尝试将表格容器向左浮动：.movie_data float: left; 并清除电影容器； .movie overflow: auto 。我现在没有可用的 IE7，所以我在这里猜测：P

【参考方案1】：

您为什么不尝试删除表格上的填充，并将margin-left 放在图像上？

【参考方案2】：

这是my attempt 的答案。我移动了一点（如果它太多了就对我大喊：-p）......对.movie元素等应用了一个clearfix。这就是我会做的。我将填充移动到图像而不是TABLE。我注意到表格上的填充并不总是您期望的那样，而且我认为大多数浏览器只希望在 TH 和 TD 元素内部进行填充。

【参考方案3】：

尝试在图片上添加margin-right，而不是在桌子上添加padding-left。请参阅我对your JSFiddle 所做的微小更改。