小字体小行高兼容性分析及差异解决办法

01-01 19:59:59浏览次数:603次栏目：HTML与CSS教程

标签：html与css教程,css教程,html网页设计教程,暂无联系方式 小字体小行高兼容性分析及差异解决办法,

提示：你可以先修改部分代码再运行。

www.qidian55.com

2. 如果确定标签内存在英文字符、数字、符号，可以设置英文字体，利用行高在15px下呈现的状态。

解释：此时仅ff3和chrome2浏览器存在些许差异，并且外观上不存在上多下少的边距。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>line-height:15px;font-family:arial时呈现比较理想的状态</title> </head> <style type="text/css"> * {margin:0; padding:0; list-style:none; } div { font-size:12px; font-family:arial; line-height:15px; float:left; padding:1px 3px; border:1px solid #000;} </style> <body> <div>十四像素 - 14px</div> </body> </html>

提示：你可以先修改部分代码再运行。

3. 如果不能保证是否存在英文字符、数字、符号，又需要设置英文字体保证美观，也可利用行高在15px下呈现的状态。（推荐）

解释：此时ie8浏览器下的状态不容乐观，上下差异太大：上0px，下4px，但可以利用:before伪类，赐它一个符号。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>line-height:15px;font-family:arial时呈现比较理想的状态（即使是纯中文）</title> </head> <style type="text/css"> * { margin:0; padding:0; list-style:none; } div { font-size:12px; font-family:arial; line-height:15px; float:left; padding:1px 3px; border:1px solid #000; } div:before { content:"1"; margin-left:-2000px; margin-right:1993px; } </style> <body> <div>十四像素</div> </body> </html>

提示：你可以先修改部分代码再运行。

上一页 [1] [2]

，小字体小行高兼容性分析及差异解决办法

《小字体小行高兼容性分析及差异解决办法》相关文章

给资讯打分：

网友评论：