33% + 33% + 34% не такая же ширина, как 100% на iOS

Question

33% + 33% + 34% не такая же ширина, как 100% на iOS

0

Я сталкиваюсь с ситуацией, когда 3 divs с шириной 33%, 34% и 33% не составляют столько же пикселей, сколько один div со 100% шириной. Рассмотрим следующий полный 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>

Вы заметите, что сафари на iphones, ipads и даже некоторые настольные экземпляры IOS покажут div, у которого на 100% больше, чем сумма ширины под ним. Это кажется странным, и либо предполагает, что мое понимание того, как работает ширина, ошибочно, или IOS возится с нашими головами.

Все устройства Apple, которые я тестировал, демонстрируют это поведение (сафари на macbook, сафари на ipad, сафари на iphone, хром на ipad, хром на iphone и т.д.). Он не проявляет такого поведения при использовании хром в окне окна или сафари в окне окна или Android.

Здесь jsfiddle: http://jsfiddle.net/zd6wx/

Какой правильный способ представить это на устройстве IOS (сафари, хром и т.д.), Который также корректно отображает другие устройства (например,... android)? Я не хочу использовать таблицы, и я хочу использовать только javascript как последний вариант.

благодаря

Jason 08 май 2014, в 17:34

Источник

Теги:

html

css

ios

responsive-design

2 ответа

Ещё вопросы

Eric Whitehead · Answer 1 · 2014-05-08T13-55-00.000Z

Вам нужно указать атрибут размера окна. Чтобы охватить все броузеры, используйте:

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

Смотрите его в действии: http://jsfiddle.net/5gfdZ/1/

Если я посмотрю на этот пример jsfiddle с использованием ipad, он все равно будет отображаться с непоследовательной шириной. Спасибо за попытку, хотя.
Я также подтвердил, что предложенное вами решение не работает на iphone под управлением ios 7.1.1 с использованием safari или chrome.

Carlos Jiménez · Answer 2 · 2014-05-08T15-20-00.000Z

Ummm... возможно, вызвано вычисленным стилем Safari Mobile.

Можете ли вы попытаться установить правило сброса?

<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>

Надеюсь, поможет!

Кажется, это тоже ничего не меняет. Края двух рядов элементов div все еще противоречивы.