IE8 <input type="button"> - CSS 悬停不适用于边框和填充设置为 0答案

【问题标题】：IE8 <input type="button"> - CSS hover does not work with border and padding set to 0IE8 <input type="button"> - CSS 悬停不适用于边框和填充设置为 0
【发布时间】：2011-07-08 00:41:48
【问题描述】：

测试页面：

<!DOCTYPE html>
<html>
    <head>
        <title>button border hover test</title>
        <style type="text/css">
            input
            {
                border: 0;
                padding: 0;
            }

            input:hover
            {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="button" value="input element" /><br>
        </form>
    </body>
</html>

背景颜色不变。如果将填充设置为高于 0 的值，则背景颜色会发生变化。我在 Firefox 中没有看到这种行为。

1px 的内边距不会破坏布局，但有谁知道使用 0 内边距使这项工作的方法？

【问题讨论】：

您可以使用<button type="submit"> 元素吗？它将在 IE8 中运行。 labs.findsubstance.com/2009/05/21/…
不幸的是，该项目建立在一个不允许
非常肯定：IE8 仅支持 :hover 上的 <a> 元素。

标签： button internet-explorer-8 input hover

【解决方案1】：

有两种可能的解决方案。

改用<button> 元素。
使用填充。但即便如此，有时悬停也不起作用。

来自http://www.sitepoint.com/forums/showthread.php?769898-button-vs.-input-type-quot-button-quot的一些相关信息

<button> 可以包含 HTML，并且更易于使用 CSS 设置样式，这实际上跨浏览器应用。然而，也有一些在 IE 中使用它的缺点。 IE 没有正确检测到值属性（并使用标签的内容作为值），以及所有无论按钮是否被点击，值都会发送到服务器。这使得使用它有点棘手。

<input type="submit"> 没有任何价值或检测问题。但是，您不能像 with 一样添加 HTML，只能使用价值标签。造型也更难，造型并不总是跨浏览器响应良好。

【讨论】：

【解决方案2】：

欢迎来到俱乐部。这让我发疯了。我在最后一列有一个带有按钮的表格。当您将鼠标悬停在一行上时，背景会发生变化。如果将鼠标悬停在行中的按钮上，按钮上的文本颜色以及行背景都会发生变化。我在按钮上有 0 填充。所有这一切都在 FF 中运行良好，没有任何问题。

在 IE8 中，一个完整的故事。行悬停效果很好，但是当您将鼠标悬停在行中的按钮上时，什么也没有发生。行背景没有改变，按钮文本颜色没有改变（99.99% 的时间）。

我玩了这个，终于意识到发生了什么。似乎悬停在按钮文本上时不起作用。我在按钮文本的每一侧添加了 20px 的填充。如果我将光标向下滑动填充区域中的按钮（不触摸文本），它的效果和 FF 一样好。一旦我将光标向下滑动到按钮中间（通过按钮文本），它就会中断。

去图吧。我讨厌 IE!!!!

【讨论】：