首页 > 代码库 > 准标准模式和标准模式之间的差别-1(旧文首发)

准标准模式和标准模式之间的差别-1(旧文首发)

2024-07-27 10:18:56   218人阅读

"理论上，标准模式和准标准模式的区别仅在于非IE6/7浏览器对于单元格里(原文说法可能有误，经测试所有图片均受影响)图片布局的不同处理。同事渔隐做了细致地测试并给出了解决方案。

Update 20100203：发现iframe的布局也受到影响，解决方法和图片一致。"

http://www.chencheng.org/blog/2010/01/15/ppt-detail-on-html-spec/?replyTo=13502#comment-13503 新首页开发PPT详解 —— HTML规范 淘宝网2011 首页

受他的启发，

1.al标准模式:全部浏览器一致,像素差2px;

2.标准模式:标准模式,标准浏览器有6px像素差(ie8是5px),ie6|7为2px;

3.xml头(quirk模式)，没有doctype:只有ie8保持5px像素差,其他全部一致相差2px;

al标准模式,全部浏览器一致

 

标准模式,标准浏览器一致(只有ie8相对于其他少1px)

标准模式ie6|7 2个图片贴近

 
 
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<!--<!DOCTYPE html>-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>模式测试</title>
<meta name="Keywords" content="" /> 
<meta name="Description" content="" />
<style type="text/css">
*{margin: 0 ;padding: 0;font-family: arial;}
#topbar{ }
img{ border: 0 none;}
</style>
</head>
<body>
<div><img src="222.gif"/><img src="222.gif"/><img src="222.gif"/><img src="222.gif"/><imgsrc="222.gif"/></div>
<div id="topbar"><img src="123.gif" height="" width="50"/></div>
<table>
<tr>
    <td><img src="http://www.mamicode.com/222.gif"/><img src="http://www.mamicode.com/222.gif"/><img src="http://www.mamicode.com/222.gif"/><img src="http://www.mamicode.com/222.gif"/><imgsrc="http://www.mamicode.com/222.gif"/></td>
</tr>
<tr>
    <td><img src="http://www.mamicode.com/123.gif" height="" width="50"/><img src="http://www.mamicode.com/123.gif" height="" width="50"/><img src="http://www.mamicode.com/123.gif" height="" width="50"/></td>
</tr>
</table>
</body>
</html>?
 
用到的图片
     
 

准标准模式和标准模式之间的差别-1(旧文首发)


联系
我们