码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-10-16 01:00:51      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   ar   strong   

"理论上,标准模式和准标准模式的区别仅在于非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标准模式,全部浏览器一致

 

bubuko.com,布布扣

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

bubuko.com,布布扣

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

 bubuko.com,布布扣
 
代码
<!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;padding0;font-familyarial;}
#topbar}
imgbordernone;}
</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="222.gif"/><img src="222.gif"/><img src="222.gif"/><img src="222.gif"/><imgsrc="222.gif"/></td>
</tr>
<tr>
    <td><img src="123.gif" height="" width="50"/><img src="123.gif" height="" width="50"/><img src="123.gif" height="" width="50"/></td>
</tr>
</table>
</body>
</html>?
 
用到的图片
bubuko.com,布布扣    bubuko.com,布布扣 
 

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

标签:des   style   blog   http   color   io   os   ar   strong   

原文地址:http://www.cnblogs.com/wuduan/p/4027671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!