1

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

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

原因当然是我正在渲染的树看起来很糟糕，因为 IE6/IE7 中的空白。

IE6/IE7

替代文字 http://img190.imageshack.us/img190/9985/ie7l.png

火狐/IE8

替代文字 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>
4

5 回答 5

5

使用高度来解决这个问题。

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

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

在：

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

它将在 IE 6.0/7 中正常工作。

于 2009-07-31T07:16:51.613 回答
2

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

于 2010-06-16T14:43:21.207 回答
2

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

于 2011-01-13T15:37:32.030 回答
0

原因当然是我正在渲染的树看起来很糟糕，因为 IE6/IE7 中的空白。

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

于 2009-06-12T19:20:48.290 回答
0

在没有看到代码的情况下，我认为您遇到了这个“IE 继承的边距错误：表单元素和 hasLayout”

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

干杯

于 2009-06-12T20:01:42.547 回答