Chrome против FF / IE / Opera в расчете ширины ячейки таблицы? (Таблица-макет: фиксированный) - PullRequest
Новая
       47

Chrome против FF / IE / Opera в расчете ширины ячейки таблицы? (Таблица-макет: фиксированный)

5 голосов
/ 31 августа 2010

Я искал сейчас почти полдня ... но я не мог выяснить, почему chrome6 / 7 кажется единственным браузером по сравнению с IE8 / FF3.6 / Opera, который не добавляет отступы к указанная ширина ячейки таблицы.

Конечно, это становится критически важным, если вы работаете с макетом таблицы: исправлено, из-за того, что вдруг им приходится обращать внимание на указанную ширину px.

Хорошо, наконец, мой вопрос: Кто-нибудь знает, почему Chrome вычисляет иначе, и какой браузер правильный (соответствует стандарту), и, надеюсь, есть ли элегантное решение?

На данный момент единственным выходом будет условный комментарий с chrome.css, где я добавляю отступ к ширине вручную ... shiver ...

(кстати: любой, кто испытывает искушение сказать, что ширина пикселя не подходит для веб-разработки ... не стесняйтесь покидать эту страницу молча)

ДОПОЛНЕНИЕ: ( в отношении ответов )
прежде всего, спасибо за ваши немедленные ответы ... я пытался сделать его как можно более коротким, и там я свел факты к минимуму ... но, как вы упомянули, в веб-разработке существует множество вариаций и поэтому я пытаюсь уточнить ... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
    <style type="text/css">
        div { width:300px; }
        table { table-layout:fixed; width:100%; height:50px; }
        td.col1 { width:20px; background-color:blue; }
        td.col2 { width:40px; background-color:red; }
        td.col3 { width:60px; background-color:yellow; }
        td.col3 { width:auto; background-color:yellow; } 

        td { padding:5px; }
    </style>
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                <td class="col3"></td>
                <td class="col4"></td>
            </tr>
        </table>
    </div>
</body>

теперь, если вы переключаете линию CSS 

td { padding:5px; }

в разных браузерах вы увидите, что Chrome включает отступы по ширине, в то время как другие добавляют его

надеюсь, это поможет уточнить и заранее спасибо
Berny

Ответы [ 5 ]

3 голосов
/ 19 июня 2011

У меня та же проблема, и, к сожалению, я не нашел реального решения, но я нашел два других потока, отчет об ошибке + обходной путь.

Темы:

  1. Макет таблицы: исправлены различия в отображении в Safari

  2. Браузеры Webkit не учитывают заполнение при определении ширины ячейки в макете таблицы: исправлено

Сообщение об ошибке:

https://bugs.webkit.org/show_bug.cgi?id=13339

Возможное решение: см. вторую ветку.

2 голосов
/ 31 августа 2010

Я попытался воспроизвести вашу проблему, но в Chrome 7 и Firefox 3.6 для меня выглядит следующее: 

<!DOCTYPE html>
<style>
table { table-layout: fixed; border: 1px solid black; }
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; }
</style>
<table>
<tr><td></td><td></td></tr>
</table>

Чтобы решить вашу проблему, я бы порекомендовал вам сначала попробовать добавить тип документа, если у вас его еще нет. Использование типа документа активирует стандартный режим, что означает, что поведение с большей вероятностью будет согласованным между браузерами. Тот, который я использую выше, <!DOCTYPE html>, является типом HTML5, но на самом деле он работает для запуска стандартного режима в почти во всех браузерах .

Если стандартный режим не помогает вам улучшить согласованность, попробуйте свести проблему к минимуму; уберите все постороннее, пока у вас не останется только достаточно, чтобы увидеть вашу проблему. Пример, который я привел выше, показывает, насколько я имею в виду минимальный; достаточно разметки и стиля, чтобы можно было легко видеть таблицы и сравнивать их между браузерами. Как только вы сведете к минимуму пример, вы можете увидеть проблему самостоятельно, а если нет, у вас будет что-то, что вы можете опубликовать на форуме, например StackOverflow, и получить гораздо более полезные ответы, так как люди не должны догадываться о Ваша проблема в том, чтобы пройтись по HTML и CSS на целую страницу, чтобы найти одну маленькую проблему, о которой вы упоминали.

1 голос
/ 20 сентября 2011

Для раскладки таблицы: исправлено с помощью CSS: 

td { width: 150px; padding: 5px; }

Ниже показан результат (слева: Chrome; справа: Firefox): [stackoverflow не позволяет мне публиковать изображения .. пока]

ХРОМ: 5-140-5 FIREFOX: 5-150-5

Предложение / Решение: старайтесь не использовать отступы на слое td. Оберните ваш контент в td элементом div / span: 

span.column_wrap
{
    padding: 0 3px;
    display: block;
    line-height: 26px;
}

<td><span class="column_wrap">content here</span></td>
0 голосов
/ 30 сентября 2012

После этой ошибки я заметил, что в Chrome, если вы добавите высоту строки таблицы (например, заголовок вашей таблицы) к 40, а затем добавите 5 отступов ко всей таблице, высота строки таблицы теперь станет 45.Это не происходит в Firefox.

Итак, чтобы исправить это, я установил высоту этой строки в css и добавил 0 отступов: 

.title {
    height: 45px;
    padding: 0px; 
}

В строке таблицывключает заголовок таблицы, затем добавьте к ней отступы.Теперь у меня может быть высота 45px + 10px, при этом строка заголовка останется 45px (вместо 55).

0 голосов
/ 12 ноября 2010

Причина, вероятно, одна из двух:

  1. Вы установили атрибут ширины таблицы и отдельных ячеек, и общая ширина ячеек не равна значению, которое вы присвоили таблице; или
  2. Общая ширина ячеек (и, следовательно, ширина таблицы) больше, чем ширина содержащего элемента (div). В этом случае Chrome перераспределяет ширину ячеек, что делает их отличными от вашего CSS.

Глядя на вашу разметку, я бы предложил вам сначала установить фактическое значение td.col3 или убрать 'auto' и посмотреть, что произойдет.

...