Как построить таблицу HTML, в которой все строки и ячейки прилегают друг к другу? - PullRequest
Новая
       1

Как построить таблицу HTML, в которой все строки и ячейки прилегают друг к другу?

0 голосов
/ 01 апреля 2011

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

Однако в одном случае я установил тип документа в, а в другомтам нет установленного типа документа.Мой ожидаемый результат показан, когда нет заданного типа документа (без интервала между границами или между ячейками или другими пробелами между ячейками и строками).Однако, когда установлен тип документа, между строками есть отступ в 1 пиксель.

HTML в обоих случаях одинаков, за исключением типа документа 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    .table{
        display: table;
    }

    .row{
        display: table-row;
    }

    .cell{
        display: table-cell;
    }
</style>
</head>
<body>
    <div id='slider' class='table'>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_01.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_02.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_03.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_04.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_05.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_06.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_07.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_08.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_09.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_10.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_11.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_12.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_13.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_14.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_15.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_16.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_17.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_18.gif' alt='slide' /></div>
        </div>
    </div>
</body>
</html>

, может кто-нибудь объяснить мнепочему между строками есть разрыв в 1 пиксель, если для типа документа задано значение HTML?

Ответы [ 3 ]

3 голосов
/ 01 апреля 2011

@ Shafee: Попробуйте - 

.row img {
    display: block;
}

Редактировать

Краткое объяснение: ваш код с DOCTYPE запускает строгий режим в вашем браузере, который обрабатываетотображение изображений по-разному.

Более подробное объяснение:

В первые дни эксперименты со строгим режимом неизменно вызывали комментарий о том, что изображения внезапно получают странное нижнее поле, которое не может быть удалено.Причиной было то, что в строгом режиме <img /> является встроенным элементом, что означает, что некоторое пространство должно быть зарезервировано для возможных символов потомка, таких как g, j или q.Конечно, изображение не имеет символов по убыванию, поэтому пространство никогда не использовалось, но его все равно нужно было зарезервировать.

Решением было явное объявление элементов уровня блока изображений: img {display: block}.

Тем не менее производители браузеров, особенно Mozilla, думали, что это настолько запутанная ситуация, что они ввели «почти строгий режим».Это было определено как строгий режим, но с изображениями, которые продолжают быть блоками, а не встроенными элементами.

Большинство распространенных типов документов, включая тот, который я использую, запускают почти строгий режим.Обработка изображений - безусловно самое важное различие между почти строгим режимом и действительно строгим режимом.

Источник: http://www.quirksmode.org/css/quirksmode.html

0 голосов
/ 01 апреля 2011

Сайт Чарльза Апсделла содержит больше информации о том, как DOCTYPE влияет на рендеринг в целом.

0 голосов
/ 01 апреля 2011

Удалите пробелы вокруг ваших элементов.

...