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

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

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

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

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

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

Сложение: ( в отношении к отвечено)
прежде всего поблагодарить вас за немедленный отвечено .. я пытался сделать это как можно короче, и там для я уменьшил факты до минимума ... но, как уже упоминалось, есть много varibales в webdeveloping и поэтому я пытаюсь прояснить ...

<!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; }

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

надежда Thats помогает прояснить и спасибо айу Анс
Berny

источник

2010-08-31 berny

Не могли бы вы привести краткий пример, демонстрирующий проблему, которую вы видите? –

Вы поставляете действительный doctype? например рендеринг в стандартном режиме. это имеет существенное значение при попытке управления рендерингом. – scunliffe

Я добавил несколько строк в свое первоначальное сообщение, надеюсь, что поможет прояснить – berny

Я пытался воспроизвести вашу проблему, но уже в следующем выглядит точно так же мне в 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, если у вас его еще нет. Использование doctype приведет к режиму стандартов, что означает, что поведение, скорее всего, будет согласовано между браузерами. Тот, который я использую выше, <!DOCTYPE html>, является документом HTML5, но он фактически работает для запуска стандартного режима в pretty much all browsers.

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

источник

2010-08-31 01:43:20

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

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

Глядя на вашу разметку, я предлагаю начать с первой установки фактического значения td.col3 или удалить «auto» и посмотреть, что произойдет.

источник

2010-11-12 12:46:55 boze

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

Темы:

отчет об ошибке:

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

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

источник

2011-06-19 13:03:02 user805346

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

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

Ниже показан результат (Слева: хром; Справа: Firefox): [StackOverflow не позволяет мне размещать изображение .. еще]

CHROME: 5-140-5 FIREFOX: 5-150-5

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

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

<td><span class="column_wrap">content here</span></td>

источник

2011-09-20 08:40:04

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

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

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

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

источник

2012-09-30 10:40:02 lonewulf

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

ответ

Смежные вопросы