IE 单选按钮忽略边距=0答案

【问题标题】：IE radio button ignoring margin=0IE 单选按钮忽略边距=0
【发布时间】：2016-01-23 03:01:48
【问题描述】：

我正在尝试使radio 按钮在 IE 和 Firefox 中看起来相同。

我有以下例子：

<head>
<style media="screen" type="text/css">    
    html, body, div, form {
        margin: 0;
        padding: 0;
    }
    input{
        margin: 0;
        padding: 0;    
    }
</style>
</head>

<body>
<span style="font-family:Arial; color:#000000; font-size:8pt;">
    <input type="radio" name="blah" value="7">MyWord<br>
</span>
</body>

在 IE 中，radio 按钮有一个额外的空白区域，其边距应为0。所以应该非常接近radio 的文本不是。

我知道如果我使用DOCTYPE 语句它可以工作，但由于其他问题，我不能使用它。

还有其他方法可以解决这个问题吗？

【问题讨论】：

为什么不能使用doctype语句？
因为它会破坏代码中的其他内容.. :)
如果你添加：span { margin:0;padding:o; } ?

标签： html internet-explorer firefox radio-button

【解决方案1】：

将单选按钮元素的宽度设置为足够小的值：

<input type="radio" name="blah" value="7" style="width: 13px">

你看到的间距既不是 padding 也不是 margin 而是单选按钮渲染的一部分（你可以看到如果你在 IE 中按 F12，然后在“HTML”下找到元素并查看布局描述 - 元素)。

似乎浏览器通常将单选按钮和复选框实现为 13 × 13 像素（总尺寸），除了 Quirks 模式下的 IE，它使用 20 × 20，除非在 CSS 中另外设置尺寸。

【讨论】：

IE-10：调整 padding-right 工作正常（0-3px）。