Почему размер шрифта в теле не влияет на шрифт в таблице, если я не добавлю 1em?

Question

Почему размер шрифта в теле не влияет на шрифт в таблице, если я не добавлю 1em?

0

<style>
body {
    font-size: 14px;
}
</style>

<body>
Text outside table.
<table>
    <tr><td>Text inside table.</td></tr>
    <tr><td>Text inside table.</td></tr>
    <tr><td>Text inside table.</td></tr>
</table>
</body>

Я пытаюсь указать размер базового шрифта для моего сайта, поэтому в других местах я могу использовать процент или em для указания размера.

HTML-код выше, без стиля body шрифт будет иметь одинаковый размер. Однако, почему с font-size в стиле body как и выше, только "Текст за пределами таблицы". повлиял на изменение размера? Разве не все заключено в <body>?

Мне нужно добавить

table {
    font-size: 1em;
}

Чтобы сделать шрифт в моей таблице, выполните размер шрифта body. Почему это не так, как с моим другим <div> на моей странице? Те <div> сделал следовать body font-size красиво.

5argon 01 дек. 2013, в 14:36

Источник

0

Не видеть этого: jsfiddle.net/tAypJ У вас должно быть другое правило для таблицы, которая мешает (щелкните правой кнопкой мыши -> элемент inspect, чтобы увидеть правила CSS.)
JJJ 01 дек. 2013, в 13:10
0

Странно, что O_o jsfiddle возвращает другой результат. В Chrome (OSX Lion) это выглядело так: dropbox.com/s/6dvx640oornxauq/…
5argon 01 дек. 2013, в 13:15
0

Может быть, у вас есть расширение или что-то, что мешает. Попробуйте в режиме инкогнито или осмотрите элемент, чтобы увидеть, какие правила CSS применяются к таблице.
JJJ 01 дек. 2013, в 13:16
0

Есть "таблица стилей агента пользователя", которая выделяет мой размер шрифта и заменяет ее на "средний", я должен посмотреть на это ..
5argon 01 дек. 2013, в 13:21

Показать ещё 2 комментария

Теги:

html

css

fonts

font-size

2 ответа

0

Оказалось, что стиль CSS по умолчанию для CSS по стилю пользователя для таблицы использует font-size: medium; и это применяется к моей table (которая не имеет font-size)

Вследствие этого правило CSS используется для игнорирования font-size моего body поскольку table более глубока по иерархии, medium размер будет иметь приоритет.

Я думаю, нет лучшего способа предотвратить это, кроме добавления стиля font-size в таблицу (в идеале с 1em значением). При использовании стиля правило CSS по умолчанию не имеет шансов быть использованным.

5argon 01 дек. 2013, в 12:03

Ещё вопросы

Не видеть этого: jsfiddle.net/tAypJ У вас должно быть другое правило для таблицы, которая мешает (щелкните правой кнопкой мыши -> элемент inspect, чтобы увидеть правила CSS.)
Странно, что O_o jsfiddle возвращает другой результат. В Chrome (OSX Lion) это выглядело так: dropbox.com/s/6dvx640oornxauq/…
Может быть, у вас есть расширение или что-то, что мешает. Попробуйте в режиме инкогнито или осмотрите элемент, чтобы увидеть, какие правила CSS применяются к таблице.
Есть "таблица стилей агента пользователя", которая выделяет мой размер шрифта и заменяет ее на "средний", я должен посмотреть на это ..

Jukka K. Korpela · Accepted Answer · 2013-12-01T11-32-00.000Z

Ваша страница отображается в режиме Quirks, возможно, потому, что она не имеет в doctype строки типа doctype или начинается с строки doctype интерпретируемой как нестандартная.

Это часть режима quirks, даже в ограниченном смысле "режим HTML5 quirks" (который пытается стандартизировать некоторые общие причуды), что таблицы не наследуют свойств шрифта. Это формально определено в HTML 5 в предложении об отображении таблиц. В определении там используется initial ключевое слово, которое пока еще не является стандартным, но оно просто означает начальное значение свойства, определенное в спецификациях CSS. Для font-size он действительно является medium.

Если это старая страница, лучше всего жить с причудами и просто явно объявлять свойства шрифта для таблиц, например, с помощью

body, table { font-size: 14px }

(не то, чтобы я когда-либо рекомендовал такую негибкость).

Если речь идет о новой странице, которую вы создаете, поставьте <!doctype html> в начале и последовательно используйте "стандартные" HTML и CSS.