разные размеры в ФФ
<style>
.test_1 {
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 5px 10px;
background-color: lightblue;
border-bottom: 8px;
border-bottom-color: transparent ;
border:solid 0px;
}
</style>
<input type=button value='111111111' class='test_1'>
<div class='test_1'>111111111</div>
Задача-что бы в ФФ размеры по вертикали были одинаковые, без явного указания оного. Во всех браузерах ОК, а в ФФ вылезает откуда-то два лишних пикселя. Для наглядности - рядом. |
А это... Вы рамочку убрали у инпута? И пожалуйста, живой пример.
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Рамку да, убрал. Вроде отредактировал сообщение.
|
Сложно сказать, почему фф так поступает. Во всех остальных эл-тах он рассчитывает по ф-ле (font-size+2 )px, а тут - font-size+4. Решение - поставить шрифт поменьше.
Но строго говоря, имеет право. |
А разве у ФФ есть специфичное свойство, вроде -moz-размершрифта для такого?
|
Цитата:
Менять вёрстку. Или скрипт. Но это плохо. Но если хочется - подсказка - не обязательно следить за каждым элементом, можно добавить body класс "moz" в самом начале, а в стиль - что-то в таком роде: .moz test_1 {
fint-size: 12px;
}
|
ну у меня возникла идея переопределить через -moz-calc для ФФ размер шрифта, но это только для 4.0+ версий. Да и в ИЕ9 сработает ((
|
Цитата:
Для 3.6 можно использовать мой способ, для выше - ваш. Хотя я бы всё-таки что-то в вёрстке поменял. |
В верстке... Можно как-нибудь указать, что абсолютный слой не должен перекрывать родительский? без z-index?
|
Вообще-то, любой слой по умолчанию перекрывает родительский. Поэтому нет.
Опишите задачу, что ли... |
Rootpassword,
Это один из самых отвратительных багов FF, хотя разработчики видимо считают эту херню фичей, так как я им уже раз пять в сапорт стучал по этому поводу. как видно результатов не принесло. Это ихний резерв места, для подсветки, при получении кнопкой фокуса. для лечения добавляем это input::-moz-focus-inner {
padding:0;
border:0;
}
ну и для button тоже если нужно button::-moz-focus-inner {
padding:0;
border:0;
}
в общем в результате всё Ок! <style>
.test_1 {
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 5px 10px;
background-color: lightblue;
border-bottom: 8px;
border-bottom-color: transparent ;
border:solid 0px;
}
input::-moz-focus-inner {
padding:0;
border:0;
}
</style>
<input type=button value='111111111' class='test_1'>
<div class='test_1'>111111111</div>
один минус, это не валидно :-E |
так и думал, что это баг из-за резерва под что-то. Покорнейше благодарю.
|
незачто! :)
у них с buton вообще печально както... |
Цитата:
но такая проблема решается так например. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
position:relative;
}
.test_1 {
width:100px;
height:100px;
background-color: lightblue;
}
.test_1>div{
position:absolute;
top:10px;
left:10px;
background:red;
z-index:-1;
}
</style>
</head>
<body>
</style>
<div class='test_1'><div>1</div></div>
</body>
</html>
Без z-index никак. |
Так ну понятно, что z-index решает проблему, но тут тогда пришлось бы js затычку писать, ибо IE старый не умеет auto/inherit использовать, а z-index:-1; вырубит старый ФФ, кстати.
|
А ну если нужны старые браузеры то тут увы....
|
| Часовой пояс GMT +3, время: 23:39. |