Проблема с заполнением в Firefox?

У меня в настоящее время проблема, когда Firefox отнимает 1-2 пикселя прокладки вокруг некоторого текста, который находится в div. Прежде чем писать слишком много, я покажу несколько фотографий и отправлю код, чтобы вы знали, что я имею в виду. Это может быть так, как делает Firefox. Anywho код и фото ниже:Проблема с заполнением в Firefox?

Chrome/Safari/Ie Экран:

enter image description here

Firefox экрана:

enter image description here

А вот код:

HTML страницы :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> 
    <head> 
     <title>Test Page One</title> 
     <LINK REL=StyleSheet HREF="stylesheets/test.css" TYPE="text/css" MEDIA=screen>  
    </head> 
    <body> 
     <div class="single_label blue_label">Test<div class="remove"></div></div> 
    </body> 
</html>

Css:

.single_label{ 
    float: left; 
    padding-right: 5px; 
    padding-left: 7px; 
    height: 14px; 
    color: black; 
    font-size: 10px; 
    font-family: Helvetica, Verdana, Arial, sans-serif; 
    text-align: left; 
    width: 74px; 
    vertical-align: bottom 
} 

.blue_label { 
    background-color: #3acbff; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
}

Так может кто-нибудь сказать мне, почему Firefox оказывает так и как это исправить?

источник

2011-02-03 Ryan

Добавить строку-высоту для вашего css. Я также предлагаю вам добавить сокращенные свойства.

Вот рабочий раствор (со старым/новым сравнительным): http://jsfiddle.net/dncxK/1/

enter image description here

.single_label { 
    color:#000; 
    float:left; 
    font:10px/16px Helvetica, Verdana, Arial, sans-serif; 
    padding:0 5px 0 7px; 
    text-align:left; 
    vertical-align:bottom; 
    width:74px; 
    height:14px; 
}

источник

2011-02-03 21:10:29 gearsdigital

Эй, я хотел бы сказать, что это устранило проблему, но это не так. Независимо от того, что я изменил до сих пор, FF настаивает на том, чтобы сделать его другим. Когда я попробую ваш пример, FF отображает его в центре, другие браузеры отображают его ниже пары пикселей. Спасибо, хотя я очень ценю вашу помощь: D @gearsdigital – Ryan

Ваш ответ помог мне больше всего, так что вы получите галочку :) @gearsdigital – Ryan

Ну, у вас может быть другой CSS, но в коде, как указано, вы никогда не устанавливаете высоту линии, так что вы полагаетесь на настройки браузера по умолчанию. Попробуйте установить определенную высоту линии.

источник

2011-02-03 21:06:10

Нет, я не пробовал высоту строки, но FF все еще делает с как разница 1px, его так странно. – Ryan

Настройка линии-высоты фиксировала это для меня. – duncmc

Хорошо, что-то должно быть перепутано с моими браузерами, потому что я изменил высоту линии, и вы все еще можете увидеть разницу в 1-2 пикселя между браузерами. , , – Ryan

Проблема с заполнением в Firefox?

ответ

Смежные вопросы