仅在 iPhone 上溢出到 div 之外的图像答案

【问题标题】：Images spilling outside div only on iPhone仅在 iPhone 上溢出到 div 之外的图像
【发布时间】：2015-04-04 13:04:37
【问题描述】：

我有一个包含 3 列的表格。每列的第一行都有一个 img，我将表格的最大宽度设为 100%。每张图片的实际宽度为 200 像素。

<table id="table1_id">
<tr id="row1_id">
  <td>
    <img src="image 1 url"/>
  </td>
  <td>
    <img src="image 2 url"/>
  </td>
  <td>
    <img src="image 3 url"/>
  </td>
</tr>
</table>

问题是除了 iPhone 之外的任何地方都可以正确渲染。仅在 iPhone 上（已尝试使用 4S 和 5S）最后一列图像仅显示一半，而我的期望显然是列（因此图像）根据 iPhone 屏幕宽度调整自身大小。

您可以通过 iPhone 在 www.checkgaadi.com 上查看实际网站。这也是小提琴 - https://jsfiddle.net/s1gfbwvy/

在测试过程中，我发现当我调整浏览器窗口的大小以模拟各种手机宽度时，当我低于 290 像素的浏览器窗口宽度时，屏幕没有响应（不会发生调整大小）。

有人可以帮忙吗。我是新手，如果这是一个基本问题，我很抱歉。我现在被这个问题困扰了一整天。

【问题讨论】：

标签： javascript css html

【解决方案1】：

刚刚在解决一个看似无关的问题时找到了解决方案。在 Android 上正确渲染的按钮在 iOS 上看起来很糟糕。找到这篇解释修复的帖子，它也修复了图像溢出问题 - CSS submit button weird rendering on iPad/iPhone。它修复（事后看来）溢出问题的原因也可以解释，因为 webkit 的按钮也更大了，现在 webkit 消失了，按钮更小了，因此没有溢出。

我所要做的就是应用样式“-webkit-appearance: none;”到输入按钮元素。

【讨论】：