Question

我目前正在调查Internet Explorer中CSS min-width属性的奇怪行为。我使用min-width听说了文本对齐的错误。但这个对我来说是新的。

<table cellspacing="0" cellpadding="0">
  <tr>
    <td><button>Einloggen</button></td>
  </tr>  
</table>

当我将按钮的min-width设置为实际拉伸按钮的值时，其右侧的空间出现/ td变宽。我只在IE中看到过这种行为。同时检查Opera，FF，Chrome和Safari。

以下是显示示例的jsfiddle。

这是一个已知的错误吗？有没有解决方法？

Answer 1

在这里使用Internet Explorer 9似乎有一个奇怪的问题。有趣的是，版本8和10都正确地呈现了这个演示，没有问题。

话虽如此，关于IE9，我找到了似乎可以解决问题的解决方法。我的成功是使用伪元素::before作为后备：

/* For everybody but IE9 */
button {
    min-width: 200px;
}

/* For Internet Explorer 9 */
button::before {
    content: "" \9;
    display: block;
    width: 200px;
}

小提琴：http://jsfiddle.net/JNDUz/21/

当工作时，它会导致Internet Explorer 10中的按钮略宽（伪元素宽度+父填充/边距）。这些黑客在IE10中没有业务，但很难将CSS单独隔离到某些浏览器。 \9技巧可以将其与非IE浏览器隔离开来，但有更好的方法：

<!--[if IE 9]><html lang="en-us" class="no-js ie9"><![endif]-->

通过将HTML标记包装在条件注释中，我们现在可以使用我们的修复程序单独定位IE：

/* For Internet Explorer 9 */
.ie9 button::before {
    content: "";
    display: block;
    width: 200px;
}

Answer 2

嗯，这有点奇怪，它在按钮的右边添加了填充，但是我设法通过使用这个

获得了最小的空间

button {
   padding: 0;
}

Answer 3

我认为它不是有效的标记，但将Einloggen字句包装到div会解决问题。

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <button>
                <div>Einloggen</div>
            </button>
        </td>
    </tr>
</table>

jsfiddle

Answer 4

上面的解决方法似乎工作正常，但也考虑到了CSS / HTML规范中不推荐使用cellspacing和cellpadding。也许弃用的状态与它有关。

按钮上的最小宽度会导致IE中右侧的空格

4 个答案: