html - 为什么黑莓手机的 td 中没有正确的填充

Question

我正在尝试应用于padding:3pxa但当您重新调整窗口大小时td它不适用于右侧td

这是我试过的DEMO

在 chrome 中检查这个，看看我的截图。

屏幕截图（看图像的右侧，没有应用填充）

---

当我使用 inline-block 图像时，它在浏览器中有效，但在黑莓手机中无效

Answer 1

在我看来，在组合max-width和元素border上存在问题。image边框不计入默认 CSS 框模型中的宽度。因此，图像水平向右移动为左边框的宽度。

我想到了一些可能的解决方法：

A)在图像元素上使用box-sizing: border-box;以切换到 Internet Explorer 在 Quirks 模式下使用的以前的历史盒子模型。

请参阅CSS 属性box-sizing。

所有浏览器的示例，在这里使用box-sizing-polyfill来实现 IE6 和 IE7 的此框模型，而无需切换到 Quirks 模式：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(js/boxsizing.htc);

B)将max-width图像的 设置为98%。使用此方法时，您还必须找到减少周围元素的底部填充，在您的情况下是表格单元格。

C)将图像向左移动其左边框的宽度：margin: 0 0 0 -2px;。这将使图像居中，但水平填充比左右边框的宽度小。

Answer 2

只需在 css 中使用display: block而不是您的图像。max-width: 100%希望这对你有用。