欢迎来到 jackNEss'窝窝
I like simple mind

修复 ie9 sans-serif 字体bug

2011年08月24日

ie9文字bug

一些在ie9出现之前就已经开发完成的项目中,在ie9下常常会见到一些灵异的事件如下图:

ie9下:

其他浏览器:

这个的产生是由于ie9对 sans-serif 字体的兼容性不好而导致的;

下面是出现问题的 html代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ie9文字bug</title>
<style type="text/css">
*{ margin:0; padding:0;}
.txtbox{ 
	display:block; 
	width:200px; 
	height:35px; 
	margin:50px auto; 
	font:12px/35px sans-serif; 
	text-align:center; 
	background:#e5f9ff; 
	border:1px solid #b8efff;
}
</style>
</head>

<body>
<div class="txtbox">这里是的博客</div>
</body>
</html>

bug触发条件:页面编码为 非 utf-8 并且字体设置了 font-family:sans-serif;
典型例子:http://www.hltm.cc

解决方案:

将字体设置成非 sans-serif 即可;

下面贴出 修复后的 html 代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ie9文字bug</title>
<style type="text/css">
*{ margin:0; padding:0;}
.txtbox{ 
	display:block; 
	width:200px; 
	height:35px; 
	margin:50px auto; 
	font:12px/35px '\5b8b\4f53' sans-serif; 
	text-align:center; 
	background:#e5f9ff; 
	border:1px solid #b8efff;
}
</style>
</head>

<body>
<div class="txtbox">这里是的博客</div>
</body>
</html>

分类bug整理
阅读 1,326
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS