我使用Bootstrap 3创建了一个网站.Bootstrap 3包含平面三角形作为glyphicons.但是图标是平的,所以我使用我的拉伸类拉伸它们:
.stretch { display: inline-block; transform: scale(3,2); /* W3C */ -webkit-transform: scale(3,2); /* Safari and Chrome */ -moz-transform: scale(3,2); /* Firefox */ -ms-transform: scale(3,2); /* IE 9 */ -o-transform: scale(3,2); /* Opera */ }
它工作得很好,但如果我使用Safari 5,图标看起来很奇怪.(抱歉,我无法直接上传图片).
三角形的边是模糊的:
glyphicon的类是:
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
我已经在body类中尝试了这个:
-webkit-transform: translateZ(0px);
我希望你能帮助我,谢谢!
解决方法
模糊缩放是Safari:
https://bugs.webkit.org/show_bug.cgi?id=27684中的一个错误
要解决此问题,您可以尝试使用font-size“缩放”glyphicon,然后使用transform:scale将其缩小.缩小比例可以给你更好的结果.
还有glyphicon-play
,它已经是您想要的形状,无需变换.使用font-size进行大小调整,而不是变换:scale还是会再次遇到同样的问题.它仅作为右箭头存在.
原文地址:https://www.jb51.cc/html/225662.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。