Отдельные стили для Safari

@Gurg0n · Регистрация: 25.11.2012

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

Уже целый день ищу в гугле хак для Safari.

@media all and (-webkit-min-device-pixel-ratio:0) и body:first-of-type - не подходят, потому что Chrome тоже видит их.

Неужели после обновления Chrome люди не придумали новый хак отдельно для Safari?
Либо я плохо искал, либо ни у кого не бывает проблем с Safari, либо его просто игнорируют, либо еще что..
Надеюсь я плохо искал и кто-то знает как написать код только для сафари.

З.Ы. Не хочу использовать скрипт для определения браузера

@VictorSchofmann · 08.09.2014, 21:44

root не пробовали?

CSS
1
html:root*.class     { color : #F00 ; }

Еще попробуйте -khtml префикс, если версия Сафари древняя.

Либо я плохо искал, либо ни у кого не бывает проблем с Safari, либо его просто игнорируют, либо еще что..

Чаще всего не возникает различий между Chrome и Safari, т.к оба - webkit браузеры.

@Gurg0n · 08.09.2014, 22:03 **[ТС]**

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

1
html:root*.class* * *{ color : #F00 ; }

Не работает. Я правильно пишу - html:root*.name* * *{ color : #F00 ; } если класс элемента ="name"?

Добавлено через 1 минуту

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

html:root*.name* * *{ color : #F00 ; }

т.е. html:root*.name

Добавлено через 1 минуту

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

Чаще всего не возникает различий между Chrome и Safari

Должно быть я неправильно пишу код

@VictorSchofmann · 08.09.2014, 22:26

Gurg0n, т.е в Chrome все норм, а в Safari баг? Редко такое случается, очень редко. Может покажете код?

@Gurg0n · 08.09.2014, 23:02 **[ТС]**

Пожалуй.

У меня неправильно отображается текст по умолчанию в input class="name". В safari он на 2px ниже. По-ходу я неправильно все сверстал.
Проблему с firefox я уже решил.
Я бы не обращал внимание на этот пиксель, но задание - сверстать в точности попиксельно.

HTML5
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
<body>
     
     <div id="wrapper">
        <header>
            
            <div id="logo">
                <a href="index.html">
                <img src="images/logo.jpg" width="145" height="37" alt="Логотип"/>
                <p>Секретный архив учреждения</p>
                </a>
            </div>
                
            <img src="images/slogan.png" id="slogan" width="252" height="106" alt="Секретно. Заполненно собственноручно"/>
                
            <img id="delo" class="delo" src="images/delo.png" width="216" height="110" alt="ДЕЛО"/>             
        </header>
        <section id="general">
            <form>
                <div class="field">
<!-- Вот input                                                 -->
                <label for="name">Полное ФИО</label><input class="name" value="Иванов Иван Иванович"></input>
                </div>
            </form>
        </section>
    </div>
        
 </body>

CSS
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
body {
    background-color: #797979;
}
 
#wrapper {
    background-image: url(../images/pattern.jpg);
    background-color: #e4c491;
    background-position: 0 -10px;
    width: 1000px;
    height: 600px;
    margin: 0 auto;
}
 
/*   Fonts   */
 
a {
    font-size: 10px;
    font-family: 'PT Sans', sans-serif;
    color: #2f1b15;         
    text-decoration: none;
    text-rendering: geometricPrecision;
}
 
label{
    font-size: 1.4em;
    font-weight:bold;
    font-family: 'PT Sans', sans-serif;
    color: #2f1b15;
}
 
 
input {
    font-size: 30px;
    font-family: 'Courier New', monospace;
}
 
/*   Header   */
 
header {
    height: 305px;
    }
    
    #logo {
        float:left;
        margin-top:66px;
        margin-left:47px;
        }
        
        #logo p {
            margin-top: 2px;
            padding-left: 4px;
        }
        
    
        
    #slogan {
        float: left;
        margin-top: 48px;
        margin-left: 502px;
    }
    
    #delo {
        margin-top: 38px;
        margin-left: 373px;
    }   
    
 
 
/*   General   */
 
#general {
    float: left;
    margin-top: 35px;
    padding-left: 109px;
}
 
@-moz-document url-prefix() {
    #general {
    margin-top: 35px;
    }
}
 
    .field {
        clear: both;
        text-align: right;
        line-height: 48px;
    }
    
    #general input {
        border: none;
        background: url(../images/text-area-bg.png) no-repeat right bottom;
        width: 612px;
        height: 45px;
        margin-top: 9px;
        padding-bottom: 5px;
        padding-left: 14px;
    }
    
        @-moz-document url-prefix() {
            #general input {
                margin-top: 10px;
                padding-bottom: 4px;
            }
        }
 
                html:root*.name {                     /*   Стиль для элемента   */
                        margin-top: 10px;
            padding-bottom: 4px;
                }
    
    label {
        line-height: 18px;
        float: left;
        margin-top: 37px;
        padding-right: 17px;
        cursor: pointer;
    }

Добавлено через 11 минут
Вот архив с сайтом, так будет понятнее. В архиве лежит макет сайта.

Если открыть index.html в браузере, то появится синее окошко. Введите туда pp-bg и нажмите на радиокнопку "jpg" - тогда появится полупрозрачный слой с макетом

Добавлено через 1 минуту
Вот архив с сайтом, так будет понятнее. В архиве лежит макет сайта.

Если открыть index.html в браузере, то появится синее окошко. Введите туда pp-bg и нажмите на радиокнопку "jpg" - тогда появится полупрозрачный слой с макетом

@VictorSchofmann · 08.09.2014, 23:03

Gurg0n, верстка в целом не очень. Сравните в инспекторе Chrome и в Safari, и найдите откуда эти 2px берутся или куда пропадают. Safari под Win смотрите? Если под Mac то может быть проблема из-за шрифта. Нужно использовать полное семейство, для кроссплатформенности. Т.е вот так указывать шрифт:

CSS
1
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;

@Gurg0n · 08.09.2014, 23:15 **[ТС]**

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

Safari под Win смотрите?

Под Win

Добавлено через 4 минуты

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

верстка в целом не очень

Вы не могли бы указать на что-нибудь, что нужно исправить? Я стараюсь верстать правильно, но пока новичок в этом деле.

@VictorSchofmann · 08.09.2014, 23:51

Gurg0n, для .field увеличьте line-height до 50px; Тогда в сафари разница примерно в 0.3px.
А лучше скачайте отредактированный мной архив. Там еще несколько свойств нужно изменить было.

А вообще, по инспекторам все было одинаково. И в чек-листе на верстку обычно допускается до 5px расхождение по тексту (даже в Pixel Perfect), т.к тот же Сафари рендерит текст совершенно иначе. Причем вебкит порт Сафари на Win и вебкит порт Сафари на OS X - это два разных порта.

Вы не могли бы указать на что-нибудь, что нужно исправить? Я стараюсь верстать правильно, но пока новичок в этом деле.

Я поспешил с выводами. В целом нормально. По крайней мере стараетесь семантики придерживаться.
Только не используйте так много ID. ID - это для скриптов, не надо на ID вешать стили.

Можно поинтересоваться? Это тестовое для CSSSR? Напишите в личку.

@Gurg0n · 09.09.2014, 00:42 **[ТС]**

Не понимаю, как здесь писать в личку?

Добавлено через 3 минуты
Если вы меньше двух дней на форуме, то вы не сможете писать личные сообщения

Добавлено через 2 минуты
Спасибо. Только текст под логотипом съехал)

Добавлено через 4 минуты
Поправил сам. В reset.css, который вы заменили normalize был стиль для всех элементов line-height: 1.
Я его прописал отдельно для элемента

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@Gurg0n 0 / 0 / 0 Регистрация: 25.11.2012 Сообщений: 39

	Отдельные стили для Safari 08.09.2014, 21:33. Показов 25312. Ответов 8 Метки нет (Все метки) Уже целый день ищу в гугле хак для Safari. @media all and (-webkit-min-device-pixel-ratio:0) и body:first-of-type - не подходят, потому что Chrome тоже видит их. Неужели после обновления Chrome люди не придумали новый хак отдельно для Safari? Либо я плохо искал, либо ни у кого не бывает проблем с Safari, либо его просто игнорируют, либо еще что.. Надеюсь я плохо искал и кто-то знает как написать код только для сафари. З.Ы. Не хочу использовать скрипт для определения браузера 0

@VictorSchofmann 5 / 5 / 2 Регистрация: 08.09.2014 Сообщений: 16
	08.09.2014, 22:26
	Gurg0n, т.е в Chrome все норм, а в Safari баг? Редко такое случается, очень редко. Может покажете код? 0

@Gurg0n 0 / 0 / 0 Регистрация: 25.11.2012 Сообщений: 39
	09.09.2014, 00:42 [ТС]
	Не понимаю, как здесь писать в личку? Добавлено через 3 минуты Если вы меньше двух дней на форуме, то вы не сможете писать личные сообщения Добавлено через 2 минуты Спасибо. Только текст под логотипом съехал) Добавлено через 4 минуты Поправил сам. В reset.css, который вы заменили normalize был стиль для всех элементов line-height: 1. Я его прописал отдельно для элемента 0

Отдельные стили для Safari

Решение