CSS-высота строки в браузерах - PullRequest
Новая
       27

CSS-высота строки в браузерах

3 голосов
/ 08 июня 2011

У меня есть несколько кнопок управления с CSS line-height: 18px. Некоторые из них являются элементами управления вводом type = "button", а другие - якорями, стилизованными для отображения в виде кнопок, подобных элементам управления вводом. В FF3.6.12 / IE8 они отображают одинаковую высоту, но в IE7 якоря короче по высоте. Как мне заставить их правильно отображаться в IE7?

Ответы [ 3 ]

3 голосов
/ 10 июня 2011

Я взял ваше демо: http://jsfiddle.net/DnGvF/

и добавил только этот CSS в конце: http://jsfiddle.net/gRF9g/

/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
    overflow: visible;
    *height: 24px;
    *line-height: 15px
}

Некоторые объяснения того, что там происходит:

  • В IE7 есть известная ошибка, которую overflow: visible исправляет, связанная с шириной кнопки. Попробуйте посмотреть мое демо в IE7 с этим и без него.
  • Я использую свойство свойства hack , чтобы обеспечить изменение height и line-height только для IE7 и ниже. Вы можете изменить числа, которые я выбрал, если вам нужно.
  • Этот хак является недействительным CSS, но с ним проблем нет. Он никогда не вернется и не укусит тебя - это «безопасный взлом». Тем не менее, если вам требуется 100% действительный CSS, есть альтернативы.

Теперь он выглядит согласованным между IE7 и более поздними версиями.

Да, это немного глупо, но, по крайней мере, все это в CSS в одном месте, с четким комментарием.

1 голос
/ 08 июня 2011

Честно говоря, если IE7 - единственная проблема, я бы просто взломал и увеличил высоту строки: 

*+html .button { line-height:24px }

Если вы используете что-то вроде Modernizr ,вы можете покончить с взломом и использовать: 

.ie7 .button { line-height:24px }

Конечно, другой альтернативой является на самом деле отследить, почему IE7 ведет себя так, как есть, и переписать свой CSS соответствующим образом, но без какого-либо размещенного кодаЯ не могу вам с этим помочь.

РЕДАКТИРОВАТЬ: Забыли об этом методе таргетинга только IE7: 

<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
0 голосов
/ 08 июня 2011

Кнопки в IE имеют дополнительные отступы / бордюры / что угодно - они не работают так же хорошо, как в других браузерах.

...