Поведение странного поведения таблицы внутри элемента LI

Я нашел очень странное поведение маржи для таблицы, когда она находится внутри элемента LI. Внутри LI TABLE имеет дополнительный запас вверху, который нельзя отменить, используя стили CSS «margin» или «padding». Единственный способ отменить это - установить «display: block» для LI (по умолчанию это «display: list-item»). Вот код:Поведение странного поведения таблицы внутри элемента LI

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Strange table margin behaviour</title> 
    </head> 
    <body> 
    <ul> 
     <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li> 
     <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li> 
     <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li> 
    </ul> 
    </body> 
</html>

Это делает в Google Chrome, как:

screenshot #1

Я ожидаю:

screenshot #2

Я действительно не понимаю, почему эта разница происходит? Сам LI не имеет никаких прокладок, TABLE не имеет полей, но вместе ...

UPD. Эта маржа отображается только в Google Chrome (24.0.1312.68). В Mozilla Firefox (18.0.2) нет поля, и страница выглядит как ожидалось (снимок экрана 2).

источник

2013-02-14 Paul Melekhov

есть какая-либо конкретная причина вы вложенность таблиц в список вроде этого? Конечно, было бы проще/лучше стилизовать таблицы без использования списков. Или даже используйте div вместо списков, если вам отчаянно нужно их обернуть. Списки IMO следует использовать для отображения отдельных элементов, а не таблиц элементов. – lukeocom

Да, причина в том, что мне нужно отобразить дерево, где каждый внутренний элемент имеет форму html и выглядит как [this] (http: // screenshot. су/show.php? IMG = 88cb29678efe7e3c8c2b5b60b0b1eac0.jpg). Да, есть и другие способы сделать это, но я интересуюсь этим аспектом для будущего. –

Это отображение выглядит правильно для меня. Если вы имеете в виду большое пространство с левой стороны, это часть UL.

источник

2013-02-14 04:24:10 pixel

Извините, я был неточен. Большое место в верхней части стола. Я сейчас задам вопрос. –

Я ожидаю, что это должно выглядеть так: [screenshot] (http://img5.imageshack.us/img5/7669/tablemargin2.png) –

как упомянутый пиксель, рендеринг выглядит отлично. Какую дополнительную маржу вы имеете в виду?

Несколько более чистый подход заключается в том, чтобы опустить теги списка и просто поместить элементы таблицы самостоятельно. Или оберните их в div для большей гибкости. Я создал jsFiddle как пример .. http://jsfiddle.net/Lz9fu/2/

<div id="table_c"> 
     <table><tr><td>test</td></tr></table> 
     <table><tr><td>test</td></tr></table> 
     <table><tr><td>test</td></tr></table> 
</div>

источник

2013-02-14 04:42:33 lukeocom

Дополнительная маржа в верхней части таблицы. –

В примере jsFiddle с флажком «Normalized CSS» он отображает без верхнего края в элементах LI. Что именно делает этот флажок? –

Я этого не заметил. Я предполагаю, что флажок использует reset.css для установки свойств по умолчанию для html-тегов. проверьте http://meyerweb.com/eric/tools/css/reset/ – lukeocom

Хотя я думаю, что лучше реализация будет использовать плавающие дивы внутри лития тегов для размещения вашей формы, решения вопроса расстояния вы видите с ваша настройка HTML должна добавить дисплей : встроенный стол стиль стол теги. (Код скопирован ниже, обратите внимание, что я переместил CSS в заголовок вместо того, чтобы быть встроенным в теги.)

Только примечание об этом: атрибут inline-table вообще не поддерживается в IE 7 и ниже, и вы должны помнить о DOCTYPE в IE 8. Это должно работать отлично в FF, Chrome и IE 9.

См: http://www.w3schools.com/cssref/pr_class_display.asp

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Strange table margin behaviour</title> 
      <style type="text/css"> 
      li { border: 1px solid #000099; margin: 0; padding: 0; } 
      table { border: 1px solid #ccc; display: inline-table; margin: 0; padding: 0; } 
      </style> 
     </head> 
     <body> 
     <ul> 
      <li><table><tr><td>test</td></tr></table></li> 
      <li><table><tr><td>test</td></tr></table></li> 
      <li><table><tr><td>test</td></tr></table></li> 
     </ul> 
     </body> 
    </html>

источник

2013-02-14 06:01:41

Спасибо. Оно работает. Но есть ли у вас идеи, почему Google Chrome делает эту маржу, пока Firefox нет? И какие стили CSS могут влиять на размер этого поля? Изменение свойства отображения является грязным взломом, что снижает значение элементов HTML. –

Поведение странного поведения таблицы внутри элемента LI

ответ

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