Question

测试页面：

<!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填充来实现这一点？

Answer 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">没有任何价值或检测问题。   但是，您无法像使用那样添加HTML，并且只能使用   价值标签。风格也更难，造型并不总是如此   跨浏览器做出很好的反应。

Answer 2

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

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

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

去图。我讨厌IE !!!!

IE8 <input type =“button”/> - CSS悬停不起作用，边框和填充设置为0

2 个答案: