Вопрос заполнения в Firefox? - PullRequest
Новая
       18

Вопрос заполнения в Firefox?

1 голос
/ 03 февраля 2011

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

Chrome / Safari / Ie Экран:

enter image description here

Экран Firefox:

enter image description here

А вот код:

html page: 

<!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 рендерит так и какэто исправить?

Ответы [ 2 ]

1 голос
/ 04 февраля 2011

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

0 голосов
/ 04 февраля 2011

Добавьте высоту строки к вашему 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;
}
...