gpt4 book ai didi

html - 33% + 33% + 34% 与 iOS 上的 100% 宽度不同

转载 作者:太空宇宙 更新时间:2023-11-04 13:28:22 25 4
gpt4 key购买 nike

我遇到这样一种情况,即 3 个宽度分别为 33%、34% 和 33% 的 div 加起来与一个宽度为 100% 的 div 的像素数不同。考虑以下完整的 html 片段:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ios math test</title>
</head>
<body>
<div style="width:100%; height:3em; background-color: green;"></div>
<div style="width:33%; height:3em; float:left; background-color: red;"></div>
<div style="width:34%; height:3em; float:left; background-color: red;"></div>
<div style="width:33%; height:3em; float:left; background-color: red;"></div>
</body>
</html>

您会注意到 iPhone、iPad 甚至某些 IOS 桌面实例上的 Safari 会显示 100% 的 div 比其下方 div 的宽度总和还要长。这看起来很奇怪,或者表明我对宽度如何工作的理解存在缺陷,或者 IOS 正在扰乱我们的头脑。

我测试过的所有苹果设备都表现出这种行为(macbook 上的 safari、ipad 上的 safari、iphone 上的 safari、ipad 上的 chrome、iphone 上的 chrome 等等)。在 Windows 框上使用 chrome、在 Windows 框上使用 safari 或 android 时,它不会表现出这种行为。

这是一个 jsfiddle:http://jsfiddle.net/zd6wx/

在 IOS 设备(safari、chrome 等...)上表示它的正确方法是什么,它也能在其他设备(例如...android)上正确呈现?我不想使用表格,我只想使用 javascript 作为最后的选择。

谢谢

最佳答案

您需要包含 box-sizing 属性。要覆盖所有浏览器,请使用:

 -webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;

查看实际效果:http://jsfiddle.net/5gfdZ/1/

关于html - 33% + 33% + 34% 与 iOS 上的 100% 宽度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23545153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com