Кроссбраузерная верстка - это такая верстка, при которой страница сайта отображается одинаково во всех браузерах, сохраняя свою функциональность.
Известно, что один и тот же html или php код может выглядеть по разному в разных браузерах (например: Firefox и Opera) . Кроссбраузерная верстка сделает так, чтобы сайт во всех браузерах отображался одинаково.
На данный момент, в России существует несколько самых популярных браузеров, при помощи которых люди ежедневно работают в сети Интернет и просматривают сайты. Таковыми браузерами являются Mozilla Firefox, Opera, Google Chrome и Safari. Делать сайт кроссбраузерным для каких либо других браузеров - не вижу смысла.
Разные стили для каждого браузера в одном файле CSS
Кроссбраузерный сайт возможно сделать с помощью подключения различных файлов CSS, для каждого браузера отдельно. Но мне этот способ показался не очень удобным. Поэтому предлагаю вам способ, который реализуется при помощи HTML и одного файла CSS.
Код расположенный ниже необходимо вставить перед тегом
в файле header.php :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
|
Как вы заметили, в коде не упомянут браузер Mozilla Firefox. Это потому, что я обычно верстаю сайт именно под браузер Firefox, а под остальные правлю файл style.css
Тем самым получаем разные классы для всего содержимого, находящегося между тегами
...для нужных браузеров. Например,
Кроссбраузерный файл CSS будет выглядить так:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#menu { width: 100px; margin: 10px 5px 10px 0;}.isOpera #menu { width: 110px; margin: 10px 5px 10px 5px;}.isChrome #menu { margin: 15px 5px 10px 0;} |
Код верстки под браузер Mozilla
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|
А в style.css, соответственно, присвоим всем нужным элементам класс .isMozilla следующим образом:
|
1
2
3
4
5
6
7
8
9
|
#menu { width: 100px; margin: 10px 5px 10px 0;}.isMozilla #menu { width: 110px; margin: 10px 5px 10px 5px;} |
Благодарю, за внимание! 
[показать]