具有透明背景的输入框在IE8中不可点击 [英] Input boxes with transparent background are not clickable in IE8
问题描述
我在表单中有一个绝对定位的输入框。输入框具有透明背景：
I have an absolutely positioned input box in a form. The input box has transparent background:
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
令人惊讶的是，我无法通过在IE8中点击它来选择这个输入框。它在Firefox中工作完美。对于 background：none 也是如此。当我更改背景颜色时：
Surprisingly, I cannot select this input box by clicking on it in IE8. It works perfectly in Firefox however. The same happens for background: none. When I change the background color:
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.
在IE8中有透明背景可点击输入框的解决方法吗？
Is there a workaround to have clickable input box with transparent background working in IE8?
更新：示例。取消注释 background-color ，且输入框可选。您也可以点击选择框，然后按Shift + Tab来集中输入框。
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中重现这样的问题。全测试用例？您确定没有导致其他透明元素覆盖可点击区域的分层问题吗？
I am unable to reproduce such a problem in IE8. Full test case? Are you sure there's not a layering problem causing some other transparent element to cover the clickable area?
设置 background-image 有区别吗？对透明的GIF呢？
Does setting background-image make a difference? What about to a transparent GIF?
ETA：好奇！它实际上是一个IE7的错误。对我来说，你的例子展示了在IE7中描述的行为，但在IE8它只有在EmulateIE7模式;在IE8本机渲染它是固定的。你通常要确保你不会回到IE7渲染通过使用一个合适的 X-UA兼容头/元;然而，是的，将 background-image 设置为透明的GIF修复了我的问题。 Tsk，我们仍然需要空白的GIF，即使在这一天和年龄，是吗？
ETA: Curious! It's actually an IE7 bug. For me, your example exhibits the described behaviour in IE7, but in IE8 it's only when in EmulateIE7 mode; in IE8 native rendering it's fixed. You'll generally want to make sure you don't fall back to IE7 rendering by using a suitable X-UA-Compatible header/meta; however, yes, setting the background-image to a transparent GIF fixed the problem for me. Tsk, we still need the blank GIF even in this day and age, huh?
这篇关于具有透明背景的输入框在IE8中不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
