Элемент абсолютного позиционирования шириной 100% внутри ошибки контейнера с относительным позиционированием в webkit

Я использовал этот трюк позиционирования для достижения сложных результатов. Я думаю, что столкнулся с ошибкой в ​​​​браузерах webkit, которую я изо всех сил пытаюсь понять.

Вот простая разметка:

<table>
<tbody>
    <tr>
        <td>
        <div>
            <span class="cols-6"></span>
        </div></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

and CSS:

*, *:after, *:before {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
tr {
    border: 1px solid #ddd;
}
td {
    vertical-align: top;
    padding: 0;
    height: 100px;
    border: solid #ddd;
    border-width: 1px 0 0 0;
    box-shadow: -1px 0px #ddd;
}
td div {
    position: relative;
}
td div span.cols-6 {
    position: absolute;
    width: 600%;
    height: 20px;
    background: #ccc;
}

Чтобы увидеть это в действии, откройте этот http://jsfiddle.net/JFxqt/14/ в хром.

Отображаемый диапазон абсолютно расположен внутри относительного контейнера. Поскольку в таблице используется фиксированный макет, все ее ячейки имеют фиксированную ширину, поэтому ребенок должен иметь возможность использовать ширину в процентах. В таблице 7 столбцов, а ширина диапазона установлена ​​на 600% (т.е. 6 столбцов * 100%). Он не может охватить все 6 столбцов в браузерах webkit. Firefox и IE полностью отображают все указанные столбцы.

В идеале установка ширины диапазона на 100% должна отображать 1 столбец, 200% — 2 столбца и так далее.

У кого-нибудь есть идеи или обходные пути?


google-chrome css absolute width webkit
person user2307131    schedule 22.04.2013    source источник
comment
Похоже, вы создаете CSS-фреймворк, так что правильно ли я предполагаю, что у вас будут такие стили, как .cols-1, .cols-2 ... .cols-10 и так далее?   -  person Marc Audet    schedule 22.04.2013

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте это: http://jsfiddle.net/JFxqt/4/

Я изменил это в вашем CSS:

body{margin:0px}
td div {

}
span.cols-6 {
    position: absolute;
    width: 85.6%;
    height: 20px;
    background: #ccc;
    z-index:10;
    top:0;
    left:0;
}
person Andrew    schedule 22.04.2013
comment
Спасибо за быстрый ответ, хотя это не совсем то, что я хотел. В таблице 7 столбцов, диапазон охватывает только 6 из них. Это означало пользовательскую замену для использования вместо colspan. Другими словами, установка его на 400% будет сродни установке colspan на 4. - person user2307131; 22.04.2013
comment
Там вы идете, это не покрывает только 6 из 7 ящиков. Вам просто нужно изменить ширину в соответствии с тем, что вам нужно - person Andrew; 22.04.2013
comment
Еще раз спасибо за ответ, но ваше решение требует знания количества столбцов, указанных в разметке. Я пытаюсь получить решение, которое работает для произвольного количества столбцов независимо от положения на странице. то есть решение должно одинаково хорошо работать с jsfiddle.net/JFxqt/6. - person user2307131; 22.04.2013
comment
Вам нужно будет попробовать jquery, чтобы сделать такой расчет - person Andrew; 22.04.2013
comment
В том-то и дело, что я пытаюсь найти решение, отличное от javascript. CSS, который я опубликовал, должен работать (работает во всех браузерах, отличных от webkit), просто интересно, есть ли что-то, чего мне не хватает, чтобы заставить webkit играть в мяч, или это неотъемлемая ошибка механизма рендеринга webkit? - person user2307131; 22.04.2013
comment
Я думаю, проблема в том, что ему просто не нравится то, что вы пытаетесь сделать. Поэтому вам, возможно, придется попробовать новое решение - person Andrew; 22.04.2013

arrow_upward
0
arrow_downward

Вы видите межбраузерную проблему, связанную с вычислением и наследованием ширины ячеек таблицы. Это может быть либо ошибка, либо что-то, что не указано явно в спецификациях CSS и оставлено на усмотрение браузера.

В Firefox ширина <td> наследуется <div>, тогда как в браузере webkit (Chrome) ширина, наследуемая дочерним элементом <div>, на 1 пиксель меньше.

Когда вы умножаете на 100% и 200%, вы не увидите эффекта, но к тому времени, когда вы дойдете до последней ячейки на 700%, вы увидите зазор примерно в 7 пикселей.

Если вы создаете структуру CSS, вам нужно будет создать стиль для браузеров Firefox и еще один для браузеров webkit.

В случае с 6 столбцами я обнаружил, что будет работать следующее:

td div span.cols-6 {
    position: absolute;
    left:-1px;
    width: 600%;
    border-right: 6px solid #ccc;
    height: 20px;
    background: #ccc;
}

Я добавляю правую границу размером 600% x 1px = 6px, а затем перемещаю диапазон влево на -1px. Для другого количества столбцов, например, .cols-3, вам понадобятся width: 300% и border-right: 3px solid #ccc и так далее.

Возможно, вам придется использовать какой-то тип CSS-фильтра или селектора. Я нашел следующую ссылку: http://browserhacks.com

К сожалению, нет чистого или элегантного решения этой проблемы.

person Marc Audet    schedule 22.04.2013
comment
Я видел функцию calc, но не пробовал. Возможно, это еще не так хорошо поддерживается. Вам обязательно нужны столы? Проблема связана с тем, как браузеры вычисляют ширину ячеек таблицы... с этим сложно справиться. - person Marc Audet; 22.04.2013
comment
Это именно то, о чем я думал, Марк, хотя это кажется еще более раздражающим. Вы можете использовать новую функцию вычисления css3, чтобы сделать что-то вроде этого jsfiddle.net/JFxqt/10. Однако даже это все равно не дает желаемых результатов. При изменении размера окна. Следите за полосой, когда вы изменяете размер своего браузера/контейнера на jsfiddle. - person user2307131; 22.04.2013
comment
Я понимаю, что вы имеете ввиду. Можете ли вы сказать мне, как будет использоваться серая полоса? какой тип контента он будет содержать? Какая гибкость/подвижность/отзывчивое поведение вам нужно? - person Marc Audet; 22.04.2013
comment
Да, к сожалению, та же проблема существует при создании более сложного решения на основе div и использовании display:table display:table-cell и т. д. Хотя мне может не повезти, я не могу придумать какие-либо обходные пути, которые, похоже, работают для webkit. - person user2307131; 22.04.2013
comment
Почему серая полоса должна быть встроена в таблицу? - person Marc Audet; 22.04.2013
comment
Это попытка создать настраиваемую реализацию rowspan/colspan, которая позволяет виджету календаря отображаться естественным образом в строке (одна ячейка) или предварительно просматриваться как событие с несколькими столбцами (без использования javascript или изменений разметки). - person user2307131; 23.04.2013
comment
Я предполагаю, что вы пытаетесь избежать чего-то вроде <td colspan=6>? - person Marc Audet; 23.04.2013
comment
Именно так, если мы на самом деле используем правильные colspans и rowspans, нам пришлось бы отображать два набора разметки (один плоский и один сгруппированный). - person user2307131; 23.04.2013

arrow_upward
0
arrow_downward

Ну, после дня или двух поисков обходных путей кажется, что условное расширение JS для браузеров Webkit является единственным жизнеспособным решением.

Проблема возникает из-за того, что Webkit (и старый движок рендеринга Opera) вычисляют ширину в процентах, которая всегда округляется до ближайшего пикселя, а не сохраняется как двойное. Поэтому в Webkit расхождение в 1 пиксель может быть добавлено для каждого коэффициента 100% (например, 2300% - 100% * 23 - будет иметь максимальное несоответствие в 23 пикселя), в то время как Firefox и более поздние версии IE могут иметь общее максимальное расхождение только в 1 пиксель. .

Джон Резиг недавно коснулся этой проблемы, http://ejohn.org/blog/sub-pixel-problems-in-css/

person user2307131    schedule 24.04.2013