我刚刚在搜索框中添加了一些样式,使角落变圆并添加了更多效果。在 Linux 下在 Chrome 和 firefox 中尝试该站点时,一切正常。它在 IE 10(在 Windows 8 中)中也可以正常工作。但在 Windows 8 Chrome(不是 Metro 版本)中,样式搞砸了!为什么?这是我添加的样式:
#top-search {
border: 1px solid #BABABA;
-webkit-border-radius: 18px 18px 18px 18px;
-moz-border-radius: 18px 18px 18px 18px;
-o-border-radius: 18px 18px 18px 18px;
border-radius: 18px 18px 18px 18px;
box-shadow: 0 0 4px #CFCFCF;
color: #696969;
float: right;
font-size: 11px;
margin-right: 2%;
margin-top: 8px;
opacity: 0.7;
padding: 3px 3px 3px 7px;
width: 6%;
outline: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
&:hover, &:focus, {
opacity: 1;
width: 8%;
}
}
以下是搜索框的显示方式: