具有透明背景的input框在IE8中不可点击
我有一个绝对定位的input框在表单中。 input框具有透明背景：
.form-page input[type="text"] { border: none; background-color: transparent; /* Other stuff: font-weight, font-size */ } 令人惊讶的是，我不能通过在IE8中点击它来select这个input框。 它在Firefox中完美工作。 background: none 。 当我改变背景颜色时：
背景颜色：红色;
它工作正常，所以这是与透明背景相关的问题。 设置边框只能通过点击边框来selectinput框。
有一个解决方法，有IE8的透明背景可点击的input框？
更新：示例。 取消注释background-color和input框是可选的。 您也可以单击select框，然后通过按Shift + Tab键来关注input框。
<!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中重现这样的问题。 完整的testing案例？ 您确定没有导致其他透明元素覆盖可点击区域的分层问题吗？
设置background-image是否有所作为？ 怎么样到一个透明的GIF？
ETA：好奇！ 这实际上是一个IE7的错误。 对我来说，你的例子在IE7中performance出所描述的行为，但是在IE8中只有在EmulateIE7模式下; 在IE8本地渲染它是固定的。 你通常会想要确保你不会使用合适的X-UA-Compatible头/元来回退到IE7的渲染; 但是，是的，将background-image设置为透明GIF可以解决我的问题。 啧啧，即使在这个时代，我们仍然需要空白的GIF，是吧？
请包含input元素的html。
你是如何定义input元素的？ 下面的代码适用于IE8（IE 8.0.7600 Windows）。 我在IE8中试过，并能够“select”input区域就好了。
<html> <head> <style> .form-page input[type="text"] { border: none; background-color: transparent; /* Other stuff: font-weight, font-size */ } </style> </head> <body> <input type="text" name="test" value="test" id="test"/> </body> </html>
你必须定义一个（透明的）背景图像。
以防万一有人会感兴趣。 build议的解决方法之一….
只要给input字段一个透明的背景图像，它会工作…
例：
#search .input { width:260px; padding:3px 5px; border:0; background:url(..http://img.dovov.comtrans.gif);}
我在Windows 7上使用IE10发现了同样的问题。以下两种方法都解决了我的问题。
Franky的方法使用透明背景图像…
background:url(http://img.dovov.comtransparent.gif);
Sketchfemme的方法使用rgba背景颜色，“0”不透明度
background-color:rgba(0,0,0,0);
吉姆·杰弗斯（Jim Jeffers）编辑Z-index的build议对我不起作用。
这是一个非常简单的testing用例：
<html> <head> </head> <body style="direction: ltr;"> <br/><br/><br/> <INPUT style="WIDTH: 100%;" /> <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;"> <INPUT style="WIDTH: 100%; background-color: transparent;"/> </DIV> </body> </html>
在IE8中运行时，您应该将焦点放在底层文本框上，而不是放在绝对定位的文本框上。
我们的解决scheme是设置透明背景颜色和透明背景图像：
<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
IE以其无限智慧决定不呈现该项目，因为它认为没有任何东西可以呈现。 有很多方法来解决这个问题，但基本上你需要给IE一些咀嚼。
给input标签本身添加一个'value = x'肯定有效。 但更有可能这不是最好的解决scheme。 一个简单的颜色：黑色（没有焦点）允许元素被选中。 将“：focus”添加到input样式允许元素进行渲染。
尝试这个：
<!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"]:focus { 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>
据bobince观察，这是一个IE7的错误。 有时我发现通过添加一个value=" "来解决这个问题比较方便，即value=" " 。 根据需要使用尽可能多的非分离空间，使可点击区域足够大。 根据您的应用程序，您可能需要稍后删除它们。
background-image:url(about:blank);background-color:transparent;
有类似的问题 – > IE8文本框不可编辑（当我的应用程序的包装位置：绝对）。 点击只在边境工作。 充满色彩和透明也没有工作。 随着以下doctype更改问题是固定的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
资料来源： http : //www.codingforums.com/showthread.php? p= 1173375#post1173375
其实在我的情况是这样的
text-indent: -9999px
我曾经删除的文字，不要这样做，它可以再次点击。
这可能看起来很奇怪，但是你应该试着明确地指定所涉及的元素的z-index。 这应该强制input渲染元素的顶部的背景颜色/图像应用到它。
似乎即使使用透明的GIF技巧，如果你设置背景：CSS透明的任何地方，对于实际的网页浏览器，它触发IE7的错误，你不会得到一个光标hover，不能轻易地点击进入input框。
这是一个很棒的问题。 如果没有这篇文章，我永远无法弄清楚发生了什么。 我的解决scheme是使用rgba(0,0,0,0)而不是透明的gif。
