有什么技巧可以让vw调整大小以在webkit浏览器上的:before伪类上工作吗

Is there any trick to get vw resizing to work on the :before pseudoclass on webkit browsers?

本文关键字：浏览器 before webkit 工作 什么 vw 调整      更新时间：2024-04-03

在webkit浏览器上使用vw大小时有一个众所周知的错误，当调整窗口大小时，它们不会更新。破解方法一直是使用javascript在调整大小时强制重画元素（通常只需重新分配z索引）。类似：

CSS：

#siteSearch input { font-size:10vw;}

Javascript/jQuery:

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

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

是的，用javascript让pseudo-element做任何事情都很难。我确实试过了，但没能那样解决。因此，我的建议是将其全部封装在标签元素中，并在其中添加glyficon，然后对标签进行样式设置。

HTML

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

和css

#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;
}

我还有一把小提琴，所以你可以试试。

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

相关文章：