ipad图像高度问题的网页设计百分比布局答案

【问题标题】：web design percent layout for ipad image height issueipad图像高度问题的网页设计百分比布局
【发布时间】：2012-10-20 09:11:53
【问题描述】：

我在使用百分比的定义列表中调整图像大小时遇到问题。该页面在我在桌面上尝试过的每个浏览器中都能正确加载，但由于某种原因，在 iPad 上它会使 DT 标签之外的图像流血。为了您的舒适，我在 jsbin 上重新创建了这个问题。 http://jsbin.com/okaqun/1

如您所见，数据库图像超出了边界线。

请帮我解决这个问题！这让我发疯太久了！

谢谢！

【问题讨论】：

没人知道答案吗？

标签： html ios css ipad safari

【解决方案1】：

我认为 iOS 在缩放奇数（1、3、5、7...）的图像时会遇到问题。您是否尝试将图像更改为均匀的宽度/高度？

【讨论】：

【解决方案2】：

我设法找到了解决方案，但这并不是我想要的。通过将带有 CSS 的图像设置为背景图像，图像大小设置为包含，我在所有设备上都得到了我想要的结果，但这远非最佳。

.list dt{
    background: #1B1B1B 0% no-repeat url('http://aux.iconpedia.net/uploads/21188781911187876141.png');
    background-size: contain;
    height: 17%;
    border-top: 1px solid #262626;
    border-bottom: 2px solid #101010;
}

虽然通过乱搞代码我觉得我发现了一些有趣的东西...... 如果我将 DT 高度设置为 0%，然后再设置回 17%，则内部图像会正确调整大小。对此行为有何解释？

【讨论】：