IE8 <input type="button"> - CSS 悬停不适用于边框和填充设置为 0
Posted
技术标签:
【中文标题】IE8 <input type="button"> - CSS 悬停不适用于边框和填充设置为 0【英文标题】：IE8 <input type="button"> - CSS hover does not work with border and padding set to 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> 元素。
【参考方案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!!!!
【讨论】：
以上是关于IE8 <input type="button"> - CSS 悬停不适用于边框和填充设置为 0的主要内容，如果未能解决你的问题，请参考以下文章
jQuery操作<input type="checkbox">
<input type="file">，输入的信息怎样用jquery获取？