Javascript 在webkit浏览器上，有没有什么技巧可以让大众在：before伪类上调整大小？

在webkit浏览器上使用vw大小时存在一个众所周知的错误，在调整窗口大小时，vw大小不会更新。解决此问题的方法一直是使用javascript在调整大小时强制重新绘制元素（通常只需重新指定z索引）。比如：

CSS:

Javascript/jQuery：

function resizing()  { $("#siteSearch *").css("z-index", 1) }
window.onresize=resizing;

---

但这似乎不起作用：在内容之前。我做了一个演示。如果调整窗口大小，搜索框/文本的大小会发生变化，但放大镜（由：before content生成的图标字体字符）不会发生变化。您必须刷新页面/重新运行JSFIDLE才能更新该页面。如果您在Firefox中尝试，由于Firefox跨站点问题，图标不会正确显示，但这与此无关。大小调整在那里起作用。

是的，让pseudo元素用javascript做任何事情都非常困难。我试过了，但没办法解决。因此，我的建议是将其全部包装在一个label元素中，并在其中添加glyficon，然后设置标签的样式

HTML

我也有，所以你可以试试

---

我希望这能对你有所帮助，祝你好运

我想这是可行的。我最初只有一个输入，然后通过输入添加了放大镜：之前…但事实证明，这只适用于Safari。因此，我不情愿地添加了#siteSearch容器，只是为了让它能够与所有浏览器一起工作。我不想在webkit用户调整浏览器大小时添加另一个容器来可靠地调整大小。我想我可以这样做，尽管这仍然需要在内容中添加glyficon，但我希望将其保留在样式中。其他人（堆栈溢出之外）刚刚建议将：before字体大小设置为100%，并在javascript位上包含父级，这似乎也行得通。哦，酷，那么你可以使用1em作为booth子项的字体大小，只更新父项的z索引。Se更新的

function resizing()  { $("#siteSearch *").css("z-index", 1) }
window.onresize=resizing;

<div id="siteSearch">
    <label>&#xf002;<input type="text" placeholder="Search" /></label>
</div>

#siteSearch input {
    background-color:transparent;
    border: 0 none;
    letter-spacing:1px;
    color: #666;
    width:4em;
    padding: .3em .5em .3em .6em;
    font-size:10vw;
    border-radius: 1em;
}

#siteSearch label {
    position:relative;
    color: #666;
    font-family: FontAwesome;
    font-size:10vw;
    left:1.6em;
    top:.1em;
    display:inline-block;
    background-color:#ECF0FC;
    border-radius: 1em;
    padding-left:.5em;
}