Имеется список:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Webkit-браузеры (проверял на Safari, Chrome) не оставляют никаких отступов слева, однако остальные (проверял на Opera, IE, Firefox) создают маленький отступ (~4px или =4px). Свойства margin/padding не помогают, специализированных для webkit'а свойств, которые бы помогли, я тоже не нашел. Чтобы наглядно было видно разницу, вот пример:
learn.javascript.ru/play/AmEp5b
Конечно, я написал хак:
@media screen and (-webkit-min-device-pixel-ratio:0) {
ul {
margin-left: 4px;
}
}
И он работает. Но может есть какое-то более красивое решение? Гуглил, но нагуглить не осилил.
UPD
Немножко поясню. Пусть имеется вот такой код вместе с normalize.css:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="http://necolas.github.com/normalize.css/2.0.1/normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
И вот как он выглядит в разных браузерах (сорри за плохое качество изображений, сильно торопился):
- Chrome
- Safari
- Firefox
- Opera
- IE 8
Заметно, что именно точечки стали ближе к тексту во всех браузерах кроме вебкитных. Какое тут конкретно расстояние — пока точно не знаю, но оно варьируется в зависимости от размера шрифта. Может быть и еще от чего варьируется %) Вот пример с чуть большим шрифтом:
Chrome
Firefox
Как видно, в разных браузерах по-разному, поэтому media screen, конечно, помогает в конкретном случае. Все браузеры последней версии, Windows 7.
Простой
