50

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

.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>
4

14 回答 14

27

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

设置background-image有区别吗？透明的 GIF 呢？

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

于 2010-01-20T02:55:57.790 回答
8

您必须定义一个（透明的）背景图像。

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

于 2010-01-20T21:35:56.077 回答
7

请包含输入元素的 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>
于 2010-01-20T02:57:13.903 回答
6

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

例子：

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
于 2010-12-01T08:33:36.203 回答
2

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


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

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


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

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


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

于 2014-02-25T12:11:31.430 回答
2

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

<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');"/>
于 2010-04-29T05:14:51.743 回答
1

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>
于 2010-01-20T04:38:40.893 回答
1

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

于 2011-03-12T19:38:14.910 回答
1 
 background-image:url(about:blank);background-color:transparent;
于 2014-02-17T03:43:30.020 回答
0

实际上在我的情况下就像

text-indent: -9999px

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

于 2012-02-14T10:27:11.043 回答
0

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

于 2011-12-23T16:26:27.643 回答
-1

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

于 2010-01-20T04:24:46.760 回答
-1

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

于 2013-04-10T18:14:29.537 回答
-1

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

于 2010-06-24T23:30:32.257 回答