33％+ 33％+ 34％與iOS上的100％寬度不一樣

我遇到的情況是3個div的寬度分別爲33％，34％和33％沒有加起來像素數量爲100％寬度的一格。請看下面的完整的HTML片段：33％+ 33％+ 34％與iOS上的100％寬度不一樣

<!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 Safari瀏覽器，甚至是IOS的一些桌面實例將顯示，有100％比的寬度之和更長的DIV它下面的divs。這似乎很奇怪，並且表明我對寬度工作的理解是有缺陷的，或者IOS正在與我們的頭相混淆。

我測試過的所有蘋果設備都展示了這種行爲（在macbook上的safari，在ipad上的safari，在iphone上的safari，在ipad上的chrome，在iphone上的chrome等）。它在Windows窗體上使用chrome或在Windows窗體或android上使用Safari時不會出現此行爲。

這裏有一個的jsfiddle：http://jsfiddle.net/zd6wx/

什麼是代表這在iOS設備上（Safari瀏覽器，鉻等）也能夠正確呈現在其他設備（如...機器人）的正確方法？我不想使用表格，我只想使用JavaScript作爲最後選擇。

謝謝

來源

2014-05-08 Jason

您需要包含box-sizing屬性。要覆蓋所有broswers使用：

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

看到它在行動：http://jsfiddle.net/5gfdZ/1/

來源

2014-05-08 15:33:21

如果我看看使用ipad的jsfiddle示例，它仍然顯示寬度不一致。謝謝你嘗試。 – Jason

我也確認你的建議解決方案不能在使用safari或chrome運行ios 7.1.1的iphone上運行。 – Jason

嗯......也許是通過Safari瀏覽器移動計算樣式引起的。

你可以嘗試把這樣的重置規則嗎？

<style> 
    div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, font, img, ins, kbd, q, s, samp, 
    small, span, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td { 
     background: transparent; 
     border: 0; 
     margin: 0; 
     padding: 0; 
     vertical-align: baseline; 
     text-decoration: none; 
     font-size: 100%; 
     font-family: arial, sans serif; 
     color: black; 
     line-height: normal; 
    } 
</style>

希望它有幫助！

來源

2014-05-08 17:22:56

這似乎也沒有區別。兩行div的邊緣仍然不一致。 – Jason

33％+ 33％+ 34％與iOS上的100％寬度不一樣

回答

相關問題