Html 具有透明背景的输入框在 IE8 中不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2098714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input boxes with transparent background are not clickable in IE8
提问by Viliam
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 */
}
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:
令人惊讶的是，我无法通过在 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?
是否有解决方法可以在 IE8 中使用具有透明背景的可点击输入框？
Update:Example. Uncomment background-colorand the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab.
更新：示例。取消注释background-color，输入框是可选的。您也可以单击选择框，并通过按 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>
采纳答案by bobince
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?
我无法在 IE8 中重现这样的问题。完整的测试用例？您确定没有分层问题导致一些其他透明元素覆盖可点击区域吗？
Does setting background-imagemake a difference? What about to a transparent GIF?
设置background-image有区别吗？透明的 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-Compatibleheader/meta; however, yes, setting the background-imageto a transparent GIF fixed the problem for me. Tsk, we still need the blank GIF even in this day and age, huh?
埃塔：好奇！这实际上是一个IE7错误。对我来说，您的示例在 IE7 中展示了所描述的行为，但在 IE8 中仅在 EmulateIE7 模式下；在 IE8 原生渲染中它是固定的。您通常希望通过使用合适的X-UA-Compatible标头/元来确保不会退回到 IE7 渲染；但是，是的，将 设置background-image为透明 GIF 为我解决了这个问题。Tsk，即使在这个时代，我们仍然需要空白的GIF，是吗？
回答by Viliam
You have to define a (transparent) background image.
您必须定义一个（透明）背景图像。
Just in case someone would be interested. One of suggested workarounds....
以防万一有人感兴趣。建议的解决方法之一......
回答by user250120
Please include the html for the input element.
请包含输入元素的 html。
How did you define the input element? The code below works in IE8 (IE 8.0.7600 Windows). I tried this in IE8 and was able to 'select' the input area just fine.
你是如何定义输入元素的？下面的代码适用于 IE8 (IE 8.0.7600 Windows)。我在 IE8 中尝试了这个，并且能够很好地“选择”输入区域。
<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>
回答by Franky
Just give the input field a transparent background image and it will work...
只需给输入字段一个透明的背景图像，它就会工作......
Example:
例子：
#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
回答by user328508
Here is a very simple test case:
这是一个非常简单的测试用例：
<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>
When running in IE8 - you should see the focus on the underlying textbox instead on the absolutely positioned textbox.
在 IE8 中运行时 - 您应该看到焦点在底层文本框上，而不是绝对定位的文本框上。
Our solution was to set both transparent background color and transparent background image:
我们的解决方案是设置透明背景颜色和透明背景图像：
<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
回答by Benjamin Walsh
I've found the same issue using IE10 on Windows 7. Both of the following methods fixed the issue for me.
我在 Windows 7 上使用 IE10 发现了同样的问题。以下两种方法都为我解决了这个问题。
Franky's method using a transparent background image...
Franky 使用透明背景图像的方法...
background:url(/images/transparent.gif);
Sketchfemme's method using an rgba background colour with '0' opacity
Sketchfemme 使用不透明度为“0”的 rgba 背景颜色的方法
background-color:rgba(0,0,0,0);
Jim Jeffers suggestion for editing the z-index's did not work for me.
吉姆杰弗斯关于编辑 z-index 的建议对我不起作用。
回答by user250120
IE in its infinite wisdom is deciding not to render the item because it thinks there is nothing to render. There are numerous ways to address this but basically you'll need to give IE something to chew on.
IE 以其无限的智慧决定不渲染该项目，因为它认为没有什么可渲染的。有很多方法可以解决这个问题，但基本上你需要给 IE 一些东西来咀嚼。
Adding a 'value=x' to the input tag itself definitely works. But more than likely it's not the best solution. A simple, color:black (without the focus) allows the element to be tabbed to. Adding ':focus' to the input style allows the element to render.
将 'value=x' 添加到输入标签本身肯定有效。但很可能这不是最好的解决方案。一个简单的 color:black（没有焦点）允许元素被标签化。将 ':focus' 添加到输入样式允许元素呈现。
Try this:
尝试这个：
<!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>
回答by reyhappen
background-image:url(about:blank);background-color:transparent;
回答by miles
As bobince observed, it's an IE7 bug. I've sometimes found it convenient to solve it by adding a value=" ". Use as many non-breaking spaces as required to make the clickable area big enough. Depending on your app, you might need to strip these later.
正如 bobince 所观察到的，这是一个 IE7 错误。我有时发现通过添加一个value=" ". 根据需要使用尽可能多的不间断空格以使可点击区域足够大。根据您的应用程序，您可能需要稍后删除这些内容。
回答by Muthukumar Arumugam
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With the following doctype change the issue is fixed.
有类似的问题 - > IE8 文本框不可编辑（当我的应用程序的包装器具有位置：绝对时）。单击仅在边框中起作用。填充颜色和透明也不起作用。通过以下文档类型更改，问题得到解决。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Source : http://www.codingforums.com/showthread.php?p=1173375#post1173375
来源：http: //www.codingforums.com/showthread.php?p= 1173375#post1173375
