Как добиться одинакового отображения элементов в разных браузерах

@Goldsilver · Регистрация: 14.01.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Собственно есть определенные проблемы с браузерами, касающиеся того, что разные браузеры по разному "интерпретируют" некоторые части верстки, если не задать им свой CSS стиль.
Ну например, в опере есть желтое свечение в полях формы (по дефолту).
Или для списков, IE считает отступ как margin, а FF как padding.

Вопрос:
К каким элементам браузеры по-разному "относятся", и как с этим бороться?
Мб есть список того, что нужно обязательно обнулить/задать свои отступы/установить свой цвет/ и тд. для одинакового отображения в разных браузерах?

п.с. Можно конечно сделать сброс стилей, но по моему это не фонтан.

@dolte · 06.02.2015, 21:20

Сброс стилей как-раз фонтан, но чтобы не городить подобное

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin:0; padding:0; border:0; outline:0;
 font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; 
 vertical-align:baseline; }
 
/* не забудьте определить состояник "фокус", стилей */
:focus { outline:0; }
body { line-height:1; color:black; background:white; }
ol, ul { list-style:none; }
 
/* таблицам необходим cellspacing="0" в разметке */
table { border-collapse:separate; border-spacing:0; }
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

Обычно все дефолтные значения обнуляют в самих стилях элементов, например у вас есть input

CSS
1
outline:none;

или список

CSS
1
list-style:none;

@Goldsilver · 09.02.2015, 15:22 **[ТС]**

ну а если сделать такое:

CSS
1
2
3
4
5
6
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

этого мало?

мб есть "дефолтовый! набор сброса (такой, чтобы не городить такое что упомянуто выше).
Ну или хотя бы конкретно к каким тегам применять какие сбрасывающие стили? Не хочется использовать сброс от Мейера

Добавлено через 3 минуты
плюс outline:none; не наследуется, а значит на каждый чих (для блочных) его использовать нужно....

Амурский · 09.02.2015, 21:15

Я normalize.css использую да и все

@Goldsilver · 10.02.2015, 14:03 **[ТС]**

Сообщение от Амурский

normalize.css

норм вещь.
Но возник вопрос: как лучше использовать:
1 подключить в head как стороннюю библиотеку (кстати, если да — то как лучше сначала свои стили потом normalize.css, или сначала normalize.css а потом свои?). Тут проблема в заключающая в +1 к количеству запросов к серверу, а это быстродействие.
2 включить в основной css (скопировать в начало).
3 включить в основной css через import (не фонтан).

И еще момент в том, что много "пустого" кода, т.е. куча стилей которые не применяются т.к. соответствующих тегов нет.

Кто что думает?

Амурский · 10.02.2015, 14:15

Ну конечно там много неиспользуемых тегов, разрабы ведь не знают, что будет применяться. Я по этому поводу не парюсь, просто сжимаю на онлайн сервисе не вырезая, потому что мало ли что заказчикам еще в голову взбредет

. Но можно сначала и вырезать ненужные теги. А подключаю просто добавляя сжатый normalize прямо в начало основного файла стилей. Заметил, что так делают разрабы шаблонов на WordPress. Там только Erick reset style и также вырезаны ненужные теги.

@Goldsilver · 10.02.2015, 14:19 **[ТС]**

Сообщение от Амурский

подключаю просто добавляя сжатый normalize прямо в начало основного файла стилей.

а каким оброзом? через импорт или просто "Ctrl+C =>Ctrl +V"?

Амурский · 10.02.2015, 14:23

Сообщение от Goldsilver

а каким оброзом? через импорт или просто "Ctrl+C =>Ctrl +V"?

А зачем импорт? Там выходит немного и не влияет на скорость загрузки.

@Goldsilver · 11.02.2015, 16:11 **[ТС]**

Слушайте, у меня возник вопрос.
А что если не сбрасывать стили, а к нужным тегам выставлять свои?

Ну например взять тот же normalize, Там есть:

HTML5
1
2
3
a {
  background-color: transparent;
}

А зачем мне сбрасывать его а потом присваивать свои стили? Мб лучше просто сразу во-все a'шные стили (ховер, фокус и тд) просто добавить этот самый background-color со своим значением?

ну или

CSS
1
2
3
4
5
6
7
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

зачем мне устанавливать дефолтовые значения? Просто переопределить все эти параметры по своим нуждам?

Просто смотрю инфу, некоторые считают что сброс стилей а потом их переназночение это что-то типа двойной работы.

Кто как считает, как лучше:
1. сбросить стили для всех конфликтных тегов (плюсы — везде все одинаково, минусы — много мусорного кода, сложнее обслуживать из за объема)
2. Просто назначить для "конфликтных" стилевых свойств свои параметры для каждого случая использования текущего селектора, независимо от того, как он будет применяться в виде class, id, .class:hover/focus и тд., ну вы меня поняли

(плюс — меньше кода, отсутствие мусорного кода, минусы — конечный клиен может "пролететь" с тегами для которых не прописаны в CSS стили)

Амурский · 11.02.2015, 16:23

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

Добавлено через 50 секунд
Да и люди не зря же разрабатывают.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Goldsilver 9 / 9 / 5 Регистрация: 14.01.2015 Сообщений: 173

	Как добиться одинакового отображения элементов в разных браузерах 06.02.2015, 15:59. Показов 2860. Ответов 9 Метки нет (Все метки) Здравствуйте. Собственно есть определенные проблемы с браузерами, касающиеся того, что разные браузеры по разному "интерпретируют" некоторые части верстки, если не задать им свой CSS стиль. Ну например, в опере есть желтое свечение в полях формы (по дефолту). Или для списков, IE считает отступ как margin, а FF как padding. Вопрос: К каким элементам браузеры по-разному "относятся", и как с этим бороться? Мб есть список того, что нужно обязательно обнулить/задать свои отступы/установить свой цвет/ и тд. для одинакового отображения в разных браузерах? п.с. Можно конечно сделать сброс стилей, но по моему это не фонтан. 0

Амурский 35 / 33 / 12 Регистрация: 11.11.2014 Сообщений: 303
	09.02.2015, 21:15
	Я normalize.css использую да и все 1

Амурский 35 / 33 / 12 Регистрация: 11.11.2014 Сообщений: 303
	10.02.2015, 14:15
	Ну конечно там много неиспользуемых тегов, разрабы ведь не знают, что будет применяться. Я по этому поводу не парюсь, просто сжимаю на онлайн сервисе не вырезая, потому что мало ли что заказчикам еще в голову взбредет . Но можно сначала и вырезать ненужные теги. А подключаю просто добавляя сжатый normalize прямо в начало основного файла стилей. Заметил, что так делают разрабы шаблонов на WordPress. Там только Erick reset style и также вырезаны ненужные теги. 0

Амурский 35 / 33 / 12 Регистрация: 11.11.2014 Сообщений: 303
	11.02.2015, 16:23
	Это к каждому элементу сайта прописывать нужно будет, я лично не помню что наследуется, а что нет? Добавлено через 50 секунд Да и люди не зря же разрабатывают. 0