在IE中不正确显示框中的图标字体
在IE中不正确显示框中的图标字体
提问于 2015-10-28 03:12:04
我使用Wordpress与UDesign主题，其中包括图标，我使用这些在我的网站上显示图标在小的蓝色框，你可以看到他们在这个页面。
http://www.whichgreekisland.co.uk/islands/corfu/beaches/agnos/
我必须自定义CSS才能让它显示在盒子里，我在网上找到了一个教程，它是用圆圈做的，我只是改变了边框的半径，使它们与圆角成正方形。因此，它使用了一个名为.圆形图标的类，它上面有下面的css。
color: #FFF;
font-size: 2.4em;
background: #018ED7 none repeat scroll 0% 0%;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
padding: 6px;
line-height: 2.6em;
margin-right: 10px;
border-radius: 3px;它们在Chrome和Firefox上正确显示，比如，图标在盒子的中心，但是在IE中，盒子的底部不见了，所以图标在盒子的底部，盒子太小了。
我尝试过更改css，但是我无法让它工作。我做错了什么?还是有更好的方法把这些图标放在圆角的蓝色小盒子中间？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-28 05:35:40
使用<i>标记是错误的。在HTML中，<i>应该代表文本的其他部分(通常以斜体表示)，内联元素也是如此。有时它被用来呈现一个图标，但它是一个语义映射。
因此，如果使用<i>呈现图标，则应将其显示模式更改为inline-block。实际上，图标的大小只是根据伪元素:before、line-height和填充的大小计算出来的(这可能在内联元素上呈现得很奇怪)。因此，不应用120 So的宽度和高度属性。
您需要做的是添加以下规则，以获得当前在Chrome/FF中，但在inline-block中相同的呈现方式
i {
display: inline-block
width: 53px;
height: 48px;
}
i:before {
line-height: 48px; /* vertically center the icon */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33389502
复制相关文章
点击加载更多
相似问题
字体图标在页脚中不正确显示
在IE浏览器中，未显示图标字体
在文本框中显示字体强大的图标
Xamarin在UWP中形成字体图标不正确显示
IE7中的图标字体
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
