Question

在webkit浏览器上使用vw大小时，有一个众所周知的错误，在调整窗口大小时它们不会更新。解决方法一直是使用javascript来强制重新调整元素的重绘（通常只是通过重新分配z-index）。像：

CSS：

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

的Javascript / jQuery的：

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

但这似乎不起作用：在内容之前。我做了JSFiddle来演示。如果您调整窗口大小，搜索框/文本会改变大小，但放大镜是由内容生成的图标字体字符，但不会。你必须刷新页面/重新运行JSFiddle来更新它。如果您在Firefox中尝试它，由于Firefox跨站点问题，图标无法正常显示，但这是无关的。尺寸在那里工作。

Answer 1

是的，很难让伪元素用javascript做任何事情。我确实试过但却无法解决这个问题。所以我的建议是将它全部包装在标签元素中，然后在其中添加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;
}

我也是fiddle所以你可以尝试一下。

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

是否有任何技巧可以让vw调整大小以适应：webkit浏览器上的伪类之前？

1 个答案: