IE8 焦点伪类和同级选择器

Posted

技术标签:

【中文标题】IE8 焦点伪类和同级选择器【英文标题】：IE8 focus pseudo class and Sibling Selector 【发布时间】：2010-12-17 16:06:50 【问题描述】：

我有一些标记，我正在尝试在 accosicated 文本输入具有焦点时点亮“某些输入的提示”。我正在尝试将焦点伪类与兄弟选择器一起使用。如果我只使用其中一种，它就可以了。但是，当在 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

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

【问题讨论】：

【参考方案1】：

我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 执行所需的操作。

【讨论】：

【参考方案2】：

根据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 上测试了我的解决方案，并且运行正常。

【讨论】：

以上是关于IE8 焦点伪类和同级选择器的主要内容，如果未能解决你的问题，请参考以下文章

伪类选择器，伪类和伪元素的区别

伪类和自定义选择器的相对性能是啥？

H5-伪类选择器-伪元素选择器

CSS伪元素选择器问题

伪类选择器与伪元素选择器的区别

伪类和伪元素的区别