我在表单中有一个绝对定位的输入框。输入框背景透明:
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
奇怪的是，我在IE8中无法通过点击选中这个输入框。然而，它在 Firefox 中完美运行。 background: none 也是如此。当我改变背景颜色时:
background-color: red;
It works fine, so this is issue associated with transparent background. Setting a border makes the input box selectable by clicking on its border only.
Is there a workaround to have clickable input box with transparent background working in IE8?
Update: Example. Uncomment background-color and the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"] {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
最佳答案
我无法在 IE8 中重现此类问题。完整的测试用例？您确定没有导致其他透明元素覆盖可点击区域的分层问题吗？
设置 background-image 有什么不同吗？透明 GIF 怎么样？
预计到达时间:好奇!这实际上是一个 IE7 错误。对我而言，您的示例在 IE7 中展示了所描述的行为，但在 IE8 中，它仅在 EmulateIE7 模式下出现；在 IE8 native 渲染中它是固定的。您通常希望通过使用合适的 X-UA-Compatible header/meta 来确保您不会退回到 IE7 渲染；但是，是的，将 background-image 设置为透明 GIF 解决了我的问题。啧啧，现在这个时代还需要空白GIF，是吧？
关于html - 透明背景的输入框在IE8下无法点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2098714/