2

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

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

当我将min-width按钮设置为一个实际上会拉伸按钮右侧的空间时，它会出现/td变宽。我只在 IE 中看到了这种行为。也检查了 Opera、FF、Chrome 和 Safari。

这是一个包含示例的jsfiddle 。

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

4

4 回答 4

6

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;
}
于 2013-04-18T13:52:57.213 回答
1

好吧，这有点奇怪，它在按钮的右侧添加了填充，但我设法在右侧获得了最少的空间，通过使用这个

button {
   padding: 0;
}
于 2013-04-18T12:00:28.933 回答
1

我相信它不是有效的标记，但将Einloggen单词包装到 div 可以解决问题。

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

jsfiddle

于 2013-04-18T12:08:59.373 回答
0

上面的解决方法似乎工作正常，但也要考虑到 CSS/HTML 规范中不推荐使用单元格间距和单元格填充。也许不推荐使用的状态与它有关。

于 2013-04-18T14:19:48.197 回答