Html 具有透明背景的输入框在IE8中不可单击_Html_Css_Internet Explorer 8_Internet Explorer_Inputbox

Html 具有透明背景的输入框在IE8中不可单击

html css internet-explorer-8 internet-explorer

Html 具有透明背景的输入框在IE8中不可单击,html,css,internet-explorer-8,internet-explorer,inputbox,Html,Css,Internet Explorer 8,Internet Explorer,Inputbox,我在表单中有一个绝对定位的输入框。输入框具有透明背景：。表单页面输入[type=“text”]{ 边界：无；背景色：透明； /*其他材料：字体大小，字体大小*/ } 令人惊讶的是，我无法通过在IE8中单击它来选择这个输入框。不过，它在Firefox中工作得非常好。background的情况也一样：无。当我更改背景色时： background-color: red; 我无法在IE8中重现这样的问题。完整的测试用例？您确定没有导致其他透明元素覆盖可单击区域的分层问题吗设置背景图像是否会产生影

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

。表单页面输入[type=“text”]{
边界：无；
背景色：透明；
/*其他材料：字体大小，字体大小*/
}

令人惊讶的是，我无法通过在IE8中单击它来选择这个输入框。不过，它在Firefox中工作得非常好。

background的情况也一样：无

。当我更改背景色时：

background-color: red;

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

设置背景图像是否会产生影响？一个透明的GIF怎么样

埃塔：好奇！它实际上是一个IE7错误。对我来说，您的示例展示了IE7中描述的行为，但在IE8中，它仅在EmulateIE7模式下出现；在IE8本机渲染中，它是固定的。您通常希望通过使用合适的

X-UA-Compatible

header/meta来确保不会退回到IE7渲染；但是，是的，将背景图像设置为透明GIF解决了我的问题。TSK，即使在这个时代，我们仍然需要空白GIF，Huh？

< P>请包含输入元素的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>


.表单页面输入[type=“text”]{
边界：无；
背景色：透明；
/*其他材料：字体大小，字体大小*/
}

这可能看起来很奇怪，但您应该尝试显式指定所涉及元素的z索引。这将强制输入在应用了背景色/图像的元素顶部进行渲染。

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

将“value=x”添加到输入标记本身肯定有效。但很可能这不是最好的解决方案。一个简单的颜色：黑色（没有焦点）允许元素被标记为。将“：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>


输入[type=“text”]：焦点{
边界：无；
背景：透明；
/*背景颜色：蓝色*/
}
#elem528{位置：绝对；左侧：155px；顶部：164px；宽度：60px；高度：20px；}
#elem529{位置：绝对；左：218px；顶部：164px；宽度：40px；高度：20px；}

您必须定义（透明）背景图像

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

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

<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');"/>

看起来，即使使用透明gif技巧，如果你在CSS中的任何地方设置background:transparent，对于实际的web浏览器，它也会触发IE7错误，你不会在鼠标悬停时看到光标，也无法轻松点击输入框。

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

例如：

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

正如bobince所观察到的，这是一个IE7错误。我有时发现通过添加一个

value=“

”来解决这个问题很方便。根据需要使用尽可能多的不间断空格，以使可点击区域足够大。根据您的应用程序，您可能需要在以后剥离这些内容。

有类似问题->IE8文本框不可编辑（当我的应用程序的包装器具有position:absolute时）。单击仅在边框中工作。填充颜色和透明也不起作用。通过以下doctype更改，该问题已得到修复

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

来源：

事实上，在我的情况下

text-indent: -9999px

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

这是一个很棒的问题。如果没有这篇文章，我永远也搞不清楚到底发生了什么。我的解决方案是使用rgba（0,0,0,0）而不是透明gif。

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

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

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

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

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

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

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

是的，我确信，因为启用颜色不会改变图层。正在处理示例。如果页面位于Intranet区域，Viliam的IE8可能会自动使用兼容性视图。我在IE8标准模式中看到这种行为。我只是放弃了使用背景图像。您可以只添加：background image:url（//），而不是使用透明的gif，因为您可以通过按Tab键来选择该项目，所以实际上该项目是呈现的。但是点击它就会被忽略。我将尝试使用value='x'，但它会向其中添加一个文本，这通常是我不想要的。@Viliam，实际上，我认为点击会传递到后面的任何内容。我今天在一个按钮元素（客户端最终从IE6升级到IE8）上遇到了这个bug，可点击的区域是1px宽。背景：CSS中的url（../images/clear.gif）已修复（解决）它。您是否能够提供指向该页面的公共链接？IE 9.0.8112中确认的行为。。。哇，请解释一下你的答案。ThxIt只需要背景图像

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