2009-06-12 3 views
1

В Firefox и IE8 это не проблема, но в IE6 и IE7 я, похоже, не могу свести отступы/поля на переключателях на что-нибудь разумное (например, 0px или 1px).Можно ли уменьшить пробел/маркер на переключателях в IE6/IE7 до 0-1px?

Входящие изображения, вы можете видеть, что красный фон огромен на IE6/IE7 (даже с добавлением CSS и маржи, установленными на 0px), но в Firefox/IE8 все в порядке.

Причина, конечно, в том, что дерево, которое я рендеринг, выглядит ужасным с пробелами в IE6/IE7.

IE6/IE7

alt text http://img190.imageshack.us/img190/9985/ie7l.png

Firefox/IE8

alt text http://img23.imageshack.us/img23/3411/ie8k.png

Примечания: страница запускается в стандартном режиме, а красный только для иллюстрации.

Некоторые примеры кода (для тех, кто хочет взломать на него)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>IE Radio button padding hell</title> 
<style> 
    input{ 
    background-color:red; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    } 
</style> 
</head> 
<body> 
    <form name="asdf"> 
    <input type="radio" name="sdfgsd" value=""/>asdf<br/> 
    <input type="radio" name="sdfgsd" value=""/>asdf<br/> 
    <input type="radio" name="sdfgsd" value=""/>asdf<br/> 
    <input type="radio" name="sdfgsd" value=""/>asdf<br/> 
    </form> 
</body> 
</html> 
+0

Кстати, вы можете заменить '0px' только с '0'. – James

ответ

5

Используй высота для решения этой проблемы.

Я использую это на классе на входе:

.radiobtn 
{ 
border:0px; 
height:14px; 
} 

на:

<input type="radio" class="radiobtn" name="radio" value=""/> Yes 

Это будет прекрасно работать в 6,0 т.е./7.

+0

Это значительно улучшило ситуацию. Я все же получаю 1px margin между вертикальными строками, которые мне не нужны, но гораздо менее заметным. – scunliffe

0

Причина, конечно, в том, что дерево я рендеринга выглядит ужасно с пробелами в IE6/IE7.

Я предполагаю, что вы используете файл изображения для рендеринга точек и плюсов ... возможно, чтобы избежать этих пробелов, когда линии выше, вы можете использовать более высокое изображение.

+0

Правда ... Мне просто нечего делать, чтобы внести дополнительные изменения, чтобы заставить его работать в IE6/IE7 :-( – scunliffe

2

Я столкнулся с этой проблемой и смог ее исправить, плавая элемент ввода. Это устраняет небольшой вертикальный «margin» в IE6/IE7.

+0

Вы можете предоставить фрагмент css – hoaz

+0

Это был недостающий фрагмент головоломки для меня. Применение ширины/высоты/переполнения было близким, но недостаточно. Применение float, наконец, избавилось от последнего остатка поля. – squidbe

2

Добавить overflow:visible, а также высоту и ширину, чтобы избавиться от всех отступа/края в IE6/7