带透明背景的输入框在 IE8 中不可点击答案

【问题标题】：Input boxes with transparent background are not clickable in IE8带透明背景的输入框在 IE8 中不可点击
【发布时间】：2011-01-07 02:37:29
【问题描述】：

我在表单中有一个绝对定位的输入框。输入框有透明背景：

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

令人惊讶的是，我无法通过在 IE8 中单击来选择此输入框。然而，它在 Firefox 中完美运行。 background: none 也是如此。当我更改背景颜色时：

 背景颜色：红色；

它工作正常，所以这是与透明背景相关的问题。设置边框使输入框只能通过单击其边框来选择。

在 IE8 中是否有一种解决方法可以让带有透明背景的可点击输入框工作？

更新：示例。取消注释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>

【问题讨论】：

在 IE 9.0.8112 中确认的行为...哇 IE。

标签： html css internet-explorer-8 internet-explorer inputbox

【解决方案1】：

我无法在 IE8 中重现这样的问题。完整的测试用例？您确定没有导致其他一些透明元素覆盖可点击区域的分层问题吗？

设置background-image 有影响吗？透明 GIF 呢？

ETA：很好奇！这实际上是一个 IE7 错误。对我来说，您的示例在 IE7 中展示了所描述的行为，但在 IE8 中仅在 EmulateIE7 模式下；在 IE8 原生渲染中它是固定的。您通常希望通过使用合适的X-UA-Compatible header/meta 来确保不会退回到 IE7 渲染；但是，是的，将background-image 设置为透明 GIF 为我解决了这个问题。啧啧，这个时代我们还是需要空白的GIF吧？

【讨论】：

是的，我敢肯定，因为启用颜色不会改变图层。研究示例。
如果页面在 Intranet 区域中，Viliam 的 IE8 可能会自动使用兼容性视图。
我在 IE 8 标准模式下看到了这种行为。我只是放弃并使用了背景图片。
不使用透明 gif，您可以添加：background-image:url(//)

【解决方案2】：

请包含输入元素的 html。

您是如何定义输入元素的？下面的代码适用于 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>

【讨论】：

【解决方案3】：

这可能看起来很奇怪，但您应该尝试明确指定所涉及元素的 z-index。这应该强制输入在应用了背景颜色/图像的元素顶部呈现。

【讨论】：

您能否提供该页面的公共链接？

【解决方案4】：

IE 以其无限的智慧决定不渲染该项目，因为它认为没有什么可渲染的。有很多方法可以解决这个问题，但基本上你需要给 IE 一些东西来咀嚼。

向输入标签本身添加一个'value=x'绝对有效。但很可能这不是最好的解决方案。一个简单的 color:black （没有焦点）允许元素被标记。将 ':focus' 添加到输入样式允许元素呈现。

试试这个：

<!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>

【讨论】：

实际上该项目已呈现，因为您可以通过按 Tab 选择它。但是点击它会被忽略。我会尝试 value='x'，但它会添加一个文本，这是我一般不想要的。
@Viliam，实际上，我认为点击会传递给后面的任何内容。我今天在一个按钮元素上遇到了这个错误（客户端终于从 IE6 升级到 IE8），可点击区域为 1px 宽。 CSS 中的 background:url(../images/clear.gif) 修复（解决方法）它。

【解决方案5】：

你必须定义一个（透明的）背景图片。

以防万一有人感兴趣。建议的解决方法之一....

【讨论】：

【解决方案6】：

这是一个非常简单的测试用例：

<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 中运行时 - 您应该看到焦点在底层文本框上，而不是在绝对定位的文本框上。

我们的解决方案是设置透明背景颜色和透明背景图片：

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

【讨论】：

【解决方案7】：

似乎即使使用透明 gif 技巧，如果您在 CSS 中的其他任何位置设置 background: transparent ，对于实际的网络浏览器，它会触发 IE7 错误，并且您不会在悬停时获得光标并且不能轻松点击输入框。

【讨论】：

【解决方案8】：

只需给输入字段一个透明的背景图片，它就可以工作...

例子：

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

【讨论】：

【解决方案9】：

正如 bobince 所观察到的，这是一个 IE7 错误。我有时发现通过添加value=" &nbsp; &nbsp; &nbsp; " 来解决它很方便。根据需要使用尽可能多的不间断空格，以使可点击区域足够大。根据您的应用，您可能需要稍后去除这些。

【讨论】：

【解决方案10】：

有类似的问题 -> 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

【讨论】：

【解决方案11】：

其实我的情况是这样的

text-indent: -9999px

我以前删除文本，不要这样做，它可以再次点击。

【讨论】：

【解决方案12】：

这是一个很棒的问题。如果没有这篇文章，我永远无法弄清楚发生了什么。不过我的解决方案是使用 rgba(0,0,0,0) 而不是透明 gif。

【讨论】：

【解决方案13】：

 background-image:url(about:blank);background-color:transparent;

【讨论】：

请解释一下你的答案。谢谢
只需要背景图片

【解决方案14】：

我在 Windows 7 上使用 IE10 时发现了同样的问题。以下两种方法都为我解决了这个问题。

Franky 使用透明背景图片的方法...

background:url(/images/transparent.gif);

使用不透明度为 '0' 的 rgba 背景颜色的 Sketchfemme 方法

background-color:rgba(0,0,0,0);

Jim Jeffers 关于编辑 z-index 的建议对我不起作用。

【讨论】：