Изменения CSS-отступов между Chrome, Firefox + Safari - PullRequest
Новая
       5

Изменения CSS-отступов между Chrome, Firefox + Safari

1 голос
/ 07 марта 2012

Я использую font-face + CSS.Текстовое заполнение выглядит хорошо в большинстве браузеров, за исключением Safari и Chrome на Mac, где он отображает верхний отступ с дополнительными 20px или около того ... Это часть CSS: 

        p.style10 {font-family: 'TitilliumText22LThin', Arial, sans-serif; font-size: 17px; line-height: 19px; color: #FFFFFF; padding: 20px 40px 10px 10px}

Вот какон неправильно отображается в Chrome / Safari (Mac): http://siddharthkhajuria.com/srv/chrome.png

и правильно в Firefox (Mac): http://siddharthkhajuria.com/srv/firefox.png

Любая помощь / предложения о том, почему он появляется с дополнительными отступами в Chrome/ Safari на Mac?

Спасибо!Сидд.

- вот соответствующий бит html: 

<!-- START OF PROMOS 1 -->

<div class="g320" style="background-image:url(img/p1.png);
width:310px;
height:354px;
overflow:hidden;">

<p class="style9"><strong>'Bootylicious' by Tom Rosenthal</strong><br /><br />A video for Tom's reworking of the Destiny's Child classic. I directed (with Tom), filmed and edited it.<br /><br /><br /></p>

<p class="style10"><strong>BBC at the Edinburgh Fringe</strong><br /><br />I produced the website for the BBC at the 2011 Fringe Festival. I also made a range of films and took photos on-site throughout the fortnight.</p>

</div>

<div class="g640">
<iframe src="http://player.vimeo.com/video/37423313?title=0&amp;byline=0&amp;portrait=0" width="630" height="354" frameborder="0"></iframe>
</div>

<div class="g320"></div>
<div class="clear">&nbsp;</div>

<!-- END OF PROMOS 1 -->

Ответы [ 2 ]

1 голос
/ 07 марта 2012

Используйте сброс CSS, чтобы избежать подобных проблем. CSS Reset важен для удаления несогласованных полей, отступов, высоты строки и других атрибутов, которые могут привести к тому, что ваши веб-страницы будут выглядеть по-разному в разных браузерах. Создайте другой CSS-файл и назовите его «reset.css» и добавьте его вверху всех ссылок на другие CSS-файлы, используя 

<link rel="stylesheet" href="your_domain/css/reset.css">

Перейдите по этой ссылке , чтобы получить готовый файл CSS для сброса настроек и многое другое на здесь Все о сбросе CSS.

0 голосов
/ 05 ноября 2014

Для тех, кто обнаружил, что reset.css не работает, я обнаружил, что он помогает устанавливать высоты для элементов, которые показывают несовместимые отступы между браузерами. Я мог видеть большую разницу в отступах между Chrome и Safari, и это исправило это.

...