代码之家 › 专栏 › 技术社区 › Rick Kukiela

CSS3 IE9点击通过伪元素?

pseudo-element internet-explorer-9 css html

Rick Kukiela · 技术社区 · 12 年前

我有下面的小提琴和一个关于如何用CSS3设计选择框的样本。我在IE9遇到了麻烦。这个 label:before 和 label:after 伪元素阻止了它们所在的下拉箭头的“点击”操作。这在除IE9之外的所有浏览器中都能很好地工作。有人知道如何调整这个功能吗?我洗耳恭听!

http://jsfiddle.net/CXJTv/

附言:我只对css的想法感兴趣。我不希望JavaScript成为正确工作的必要条件。

2 回复 | 直到 11 年前

Paul Sweatte 8 年前

使用不透明度为零的第二个选择:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
          
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Community Dai 7 年前

如果IE对您当前的实现有问题,您可以始终使用Modernizer或 conditional statements 以使IE恢复到标准的内置下拉箭头。

这是 a fiddle 其中,我使用条件语句仅在类是非IE浏览器的情况下解析该类。

Over here 我回答了一个问题,这个问题可能会帮助您使用纯css为选择下拉列表使用自定义样式。

推荐文章

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Watercayman · Jquery模糊问题IE9部分工作

8 年前

meriton · document.getElementById('someId')导致“对象不支持属性或方法'getElementById'”

10 年前

Aasmund Eldhuset · 在IE9中,Handlebars资源的Require.js请求被随机中止

10 年前

avidenic · CSS类在IE 8和IE 9中应用,但在IE 11中不应用

10 年前

Nate Barbettini · 同一域上IE9中contentDocument的“访问被拒绝”[重复]

10 年前

Brandon · IE9调试器-在“脚本”选项卡上,调试时“其他”部分中的脚本是什么?

11 年前

sandeep · 在ie9中上传获取js错误:SCRIPT5007:应为对象

11 年前

Smile · 换行符的XSL呈现
IE8和IE9不同

11 年前

cirtrus · @font face IE9字体重量不起作用

11 年前