IE6 / IE7

Question

在Firefox和IE8中这不是问题，但在IE6和IE7中我似乎无法将单选按钮上的填充/边距减少到合理的范围（例如0px或1px）。

在包含的图片中，您可以看到IE6 / IE7上的红色背景很大（即使CSS填充和边距都设置为0px），但在Firefox / IE8中它很好。

当然，原因是因为IE6 / IE7中存在间隙，我正在渲染的树看起来很可怕。

IE6 / IE7

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

火狐/ 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>

Answer 1

使用height来解决这个问题。

我在课堂上使用这个输入：

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

在：

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

它将在I.E 6.0 / 7中正常工作。

Answer 2

我遇到了这个问题并且能够通过浮动输入元素来修复它。这消除了IE6 / IE7中的小垂直“边距”。

Answer 3

添加overflow:visible以及高度和宽度以消除IE6 / 7中的所有填充/边距

Answer 4

当然，原因是因为IE6 / IE7中存在间隙，我正在渲染的树看起来很可怕。

我猜你正在使用图像文件渲染点和加号...也许，为了避免线条较高时出现间隙，你可以使用更高的图像。

Answer 5

没有看到代码我认为你遇到了这个“IE继承的边缘错误：表单元素和hasLayout”

Positioniseverything.net上有一篇很好的文章：http://www.positioniseverything.net/explorer/inherited_margin.html

干杯

IE6 / IE7中的单选按钮上的填充/边距是否可以降低到0-1px？

IE6 / IE7

火狐/ IE8

一些示例代码（对于那些想要破解它的人）

5 个答案: