Question

我有一些标记，当试图文本输入具有焦点时，我试图让“某些输入的提示”亮起。我试图使用焦点伪类和兄弟选择器。如果我只使用一个或另一个它工作得很好。但是，当它们在IE8中组合时，它会突然显示，当您在文本框中进行选项卡时，该样式不会更新。注意：如果您单击文本框并返回，则会更新它们的样式。

这是标记：

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html { font-family: Arial; }
        .lineItem {padding:5px; clear:both; }
        .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; }
        .textbox:focus { background-color: #FFFFBF; }       
        .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; }
        .hint {  margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; }
        .textbox:focus+.hint {color: Red; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="lineItem">
            <label for="ListName" class="label">List Name</label>
            <input id="Name" name="ListName" type="text" class="textbox" />
            <span class="hint" id="NameHint">This is the title of your List.</span>
        </div>
        <div class="lineItem">
            <label for="ListSlug" class="label">http://List/Username/</label>
            <input id="Slug" name="ListSlug" type="text" class="textbox" />
            <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span>
        </div>
    </div>
    </form>
</body>
</html>

以下是我所看到的截图：

Screenshot http://www.osbornm.com/pics/IE8Issue.png

注意：适用于其他浏览器:(以及其他伪类，例如悬停工作

Answer 1

根据http://www.quirksmode.org/css/contents.html IE浏览器不正确支持相邻的兄弟选择器，基于此我恐怕必须说 - 抱歉，无法 >仅限CSS 。

但你可以使用jQuery，这就是你可以做到的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> html { font-family: Arial; } .lineItem {padding:5px; clear:both; } .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; } /* .textbox:focus { background-color: #FFFFBF; } */ .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; } .hint { margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; } /* .textbox:focus + .hint {color: Red; } */ .hintOn { color:Red; } .textboxOn { background-color: #FFFFBF; } </style> <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> var Hints = { Swap: function(obj) { $(obj).parent().find('.hint').toggleClass("hintOn"); $(obj).toggleClass("textboxOn"); }, Init: function() { $(function() { $('.textbox').focus(function() { Hints.Swap(this); }).blur(function() { Hints.Swap(this); }); }); } }; Hints.Init(); </script> </head> <body> <form id="form1" runat="server"> <div> <div class="lineItem"> <label for="ListName" class="label">List Name</label> <input id="Name" name="ListName" type="text" class="textbox" /> <span class="hint" id="NameHint">This is the title of your List.</span> </div> <div class="lineItem"> <label for="ListSlug" class="label">http://List/Username/</label> <input id="Slug" name="ListSlug" type="text" class="textbox" /> <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span> </div> </div> </form> </body> </html>

在我的解决方案中，我包含了对Microsoft托管的jQuery的引用，并编写了简单的方法来应用您需要的样式。您可以通过修改CSS类来轻松修改提示和输入框的“突出显示”状态。

我已经在IE6，IE7，IE8，Firefox，Opera，Chrome和Safari上测试了我的解决方案，它运行正常。

Answer 2

我did some research并做了一些测试。似乎问题是IE8不会更新状态，除非在下一个元素获得焦点之前元素被特别模糊。我测试了一个有针对性的IE8修复程序，但它确实需要javascript。如果权衡取舍，那取决于你：

<强> CSS：

/* Add a 'normal' selector for IE8, leave sibling selector for other browsers */
.lineItem.focus .hint, 
.textbox:focus + .hint {color: Red;}

<强> JS ：

<!--[if IE 8]>
<script type="text/javascript" charset="utf-8">
    var els = document.getElementsByTagName('input');
    for(var i = 0; i < els.length; i++){
        var el = els[i];
        if(!/textbox/.test(el.className)) continue;
        el.attachEvent('onblur', function(){
            event.srcElement.parentNode.className = event.srcElement.parentNode.className.replace(' focus','');
        });
        el.attachEvent('onfocus', function(){
            event.srcElement.parentNode.className += ' focus';
        });
    };
</script>
<![endif]-->

在结束体标记之前或最后input.textbox元素之后插入此脚本。它将查看标记，只处理包含textbox类的标记。它只是向父元素添加一个类，并在input元素模糊时删除该类。通过使用标准的父/子选择器，我们强制IE8做所需的事情。

IE8焦点伪类和兄弟选择器

2 个答案: