Макет таблицы без таблиц в IE7 - PullRequest
Новая
       23

Макет таблицы без таблиц в IE7

1 голос
/ 21 февраля 2011

Я хочу сделать простой макет формы, метки и входные данные, без таблиц. Работает нормально так: 

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

        form>div {
            display: table-row;
        }

        form>div>* {
            display: table-cell;
        }
    </style>
</head>
<body>
    <form>
        <div>
            <label>Hello</label>
            <input type="text"/>
        </div>
        <div>
            <label>World</label>
            <input type="text"/>
        </div>
    </form>
</body>
</html>

Однако в IE7 это не работает. Какой самый чистый способ создания таблиц, которые правильно отображаются в IE7, IE8, Firefox, Chrome и Safari?

Edit:

Я добавил макет макета, который хочу достичь:

layout

Ответы [ 3 ]

3 голосов
/ 21 февраля 2011

Как насчет абсолютного позиционирования?

HTML: 

<form>
    <h3> LOGIN </h3>
    <p> <label> Username: <input type="text"> </label> </p>
    <p> <label> Password: <input type="text"> </label> </p>
</form>

CSS: 

p { position:relative; }
input { position:absolute; top:0; right:0; }

Демо: http://jsfiddle.net/GCWWv/1/

Или этот CSS: 

p { position:relative; }
input { position:absolute; left:100px; }

Демонстрационная версия: http://jsfiddle.net/GCWWv/9/

1 голос
/ 21 февраля 2011

Используйте <table>. Скорее всего, вы слышали, что использование таблиц в HTML - это плохая практика. Это правда, что вы должны избегать использования таблиц для макета . Но , если вы на самом деле отображаете табличные данные, то вам следует использовать таблицу. Если вы отображаете строки и столбцы данных, для меня это звучит как таблица. Было бы неуместно пытаться подделать это с помощью css.

Немного о том, почему. HTML-тег должен описывать его содержимое, а не его внешний вид. Например, <p> представляет абзац, а не элемент блока с верхним и нижним полями и не то, что нужно использовать, когда вам нужно больше свободного места. Некоторым это нравится, потому что это кажется правильным. Это чисто и аккуратно и обеспечивает хорошее разделение между содержанием и стилем. Если все сделано правильно, это может упростить повторную обработку веб-сайта.

Но что еще более важно, это делает ОГРОМНОЕ различие для доступности. Рассмотрим программы чтения с экрана для слепых. Когда программа чтения с экрана встречает <table>, она ожидает, что она будет содержать данные. Это позволяет пользователю перемещаться по таблице по столбцам, строкам и заголовкам. Использование таблицы в неподходящее время может быть очень запутанным. Правильное использование может значительно облегчить работу пользователя. Создание таблицы из элементов div и хитроумных трюков CSS вынуждает пользователя перемещаться по каждому элементу отдельно, вместо того, чтобы переходить к соответствующей строке и столбцу. Чтобы использовать ваш пример, если пользователь заполнял форму, а некоторые поля были не нужны, он мог бы легко перемещаться по <th>, чтобы найти поля, которые ему нужно было заполнить.

Существуют и другие аналогичные причины следовать соглашению «теги описывают содержимое». Главным образом, это когда что-то кроме стандартного браузера потребляет вашу страницу. Подумайте, поисковые системы, каналы и т. Д. Есть много длинный 1024 * обсуждение * о это онлайн . HTML5 продвигает эту концепцию дальше с введением некоторых новых семантических тегов .

0 голосов
/ 21 февраля 2011

Я бы сделал что-то, чтобы вы не использовали display: table

Я бы: 

form div {
float: left;
width: 200px /* change this to whatever */
}

Если вам нужна помощь, не могли бы вы описать, какой визуальный макет вы пытаетесь достичь? Удачи.

...