IE 5.x/Win 和模型bug

时间:2014-06-16 16:06来源:网络整理作者:网络点击: 次

分享到：

IE 5.x/Win 和模型bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title><a href="/newsHtm/23/n_42323.shtml">IE</a>bug</title> 
<style type="text/css"> 
<!-- 
/*default CSS*/ 
body{ text-align:center; font:12px/120% "Courier New", Courier, monospace; color:#000;} 
code{font-family: "Courier New", Courier, monospace; border:1px solid #f60; display:block; padding:8px; margin:3px; background:#fff;} 
span.alt{ color:#c00; font-weight:bold;} 
acronym {cursor: help; font-weight:bold; border-bottom:1px #f90 dashed; color:#c00;} 
a{ color:#0099CC; text-decoration:none;} 
a:hover{ color:#333333; text-decoration:underline;}

#bug1,#bug2,#bug3{ margin-left:auto; margin-right:auto; width:780px; margin-bottom:10px; position:relative;} 
#bug1 div,bug2 div,bug3 div{text-align:left;} 
.wrap{width:500px;width /**/:530px; border:10px #f60 solid; padding:10px; margin:10px auto;} 
html>body .wrap{ width:500px;} 
.wrap *{text-align:left;} 
/* clear float*/ 
.clearfix:after { 
 content: ".";  
 display: block;  
 height: 0;  
 clear: both;  
 visibility: hidden; 
}

.clearfix {display: inline-table;}

/* Hides from <a href="/newsHtm/23/n_42323.shtml">IE</a>-mac \*/ 
.clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */ 
.clear{ clear:both;} 
/*bug1*/ 
#bug1{} 
.bugTitle{ position:absolute; left:0px; top:0px; width:100px; font:18px "Courier New", Courier, monospace; font-weight:bold;padding:5px; background:#f5f5f5;} 
#boxbug{ width:500px;width /**/:530px; border:10px #f60 solid; margin:10px auto; padding:10px;} 
#boxbugie6{ width:500px; border:10px #f60 solid; margin:10px auto; padding:10px;} 
html>body #boxbugie6{ width:500px;} 
html>body #boxbug{ width:500px;} 
/*bug2*/ 
#bug2{} 
#ie3px,#ieno3px{float: left; width: 100px; height: auto; min-height:50px; background: #f60;} 
p.ie3px,p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;} 
* html #ieno3px{margin-right:-3px;} 
* html p.no3px{height:1%;margin-left: 0;} 
/*bug3*/ 
#bug3{} 
#box1,#box2{ margin-left:50px; float:left; background:#f60; width:200px;} 
#box2{ /*float:none;*/display:inline ;}

--> 
</style> 
</head>

<body> 
<div id="bug1" class="clearfix"> 
    <a name="bug1"></a> 
    <div class="bugTitle">IE 5.x/Win 和模型bug</div> 
      <div id="boxbug" title="box bug for IE5.x">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子.
使用widht(空格)/**/:530px，解决IE5.x系列的盒解析bug，因为IE5.x系列浏览器能读到这句.在IE5.x Win，IE6.0 Win下效果一致.
<b>如何使用hack解决IE5.x盒解析bug?</b> 
    <code>#content { 
 
width:530px; //这个是错误的width，所有浏览器都读到了
 
voice-family: "\"}\"";   //IE5.X/win忽略了<span class="alt">"\"}\""</span>后的内容
 
voice-family:inherit;
 
width:500px;   //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
 
} 
 
html>body #content {   //<span class="alt">html>body</span>是CSS2的写法
 
width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。
 
} </code> 
<code>#content { 
 
width:500px !important;   //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
 
width(空格)/**/:530px;   //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
 
} 
 
html>body #content { //<span class="alt">html>body</span>是CSS2的写法
 
width:500px;   //支持CSS2该写法的浏览器有幸读到了这一句
 
} </code> 
<code>
 
</code> 
    </div> 
    <div id="boxbugie6">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子，IE5.x Win解析不正常。
IE6盒模型在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(<acronym>DOCTYPE</acronym>)声明，IE6才能够接受正确的box-model所以，hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。</div> 
</div>

<div id="bug2" class="clearfix"> 
    <a name="bud2"></a> 
    <div class="bugTitle">IE/div浮动文本出现3px间距的bug</div> 
    <div class="wrap clearfix"> 
        <div id="ie3px"> 
          <p>这里是浮动box</p> 
          <p> </p> 
          <p> </p> 
        </div> 
        <p class="ie3px">左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p> 
  </div> 
    <div class="wrap clearfix"> 
        <div id="ieno3px">这里是浮动box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解决3px bug</div> 
        <p class="no3px">左边对象是浮动的，这里是采用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，这里的文本会离左边没有了3px的空白误差。</p> 
      </div> 
  <div class="wrap"> 
        
      
</DIV>
<div class="dede_pages">
   <ul class="pagelist">
    <li><a>共2页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a href='#'>1</a></li><li><a href='n_43620_2.shtml'>2</a></li><li><a href='n_43620_2.shtml'>下一页</a></li>
   </ul>
</div>
</DIV>
<DIV class=page_next>
<UL>
<LI>上一篇：<a href='/newsHtm/19/n_43619.shtml'>各浏览器padding、margin的差异</a> </LI>
<LI>下一篇：<a href='/newsHtm/21/n_43621.shtml'>css 命名规范</a>  </LI></UL>

</DIV>

<DIV class=blkContainerSblkCon>

<script>document.write('<div id="SOHUCS" sid="'+UYId+'" ></div>');</script>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'cytTCv4G0',
conf: 'prod_ff1eac20de6755fec45da9b19bca6cbc'
});
</script>
</DIV>
<script type="text/javascript">      
 SyntaxHighlighter.highlight();   //高亮代码    
 </script>
</div>

 <div class="top_bg">精彩图集</div>
    <div class="top_bg_down">

<div class="CH_CP_TOP">
		<div class="p_img_xian">
		   <A href="/newsHtm/95/n_41495.shtml" title='BS项目中的CSS架构_仅加载自己需要的CSS'><img src='/sp/attachments/allimg/c140612/140255A0196230-1R50_lit.png' border='0' width='100' height='72' alt='BS项目中的CSS架构_仅加载自己需要的CSS'></A></div>
		<div class="CH_title">
			<A href="/newsHtm/95/n_41495.shtml"  title='BS项目中的CSS架构_仅加载自己需要的CSS'  target=_blank>BS项目中的</A>
		</div>
	</div>
<div class="CH_CP_TOP">
		<div class="p_img_xian">
		   <A href="/newsHtm/97/n_41197.shtml" title='css实现气泡框效果(实例加图解)'><img src='/sp/attachments/allimg/c140611/14024W0S423F-14933_lit.png' border='0' width='100' height='72' alt='css实现气泡框效果(实例加图解)'></A></div>
		<div class="CH_title">
			<A href="/newsHtm/97/n_41197.shtml"  title='css实现气泡框效果(实例加图解)'  target=_blank>css实现气泡</A>
		</div>
	</div>

<ul>
 <li><A title="Iframe自适应其加载的内容高度" href="/newsHtm/40/n_43640.shtml">Iframe自适应其加载的内容高度</A></li>
<li><A title="Lesson02_01 表格标签" href="/newsHtm/06/n_43406.shtml">Lesson02_01 表格标签</A></li>
<li><A title="制作WEB在线编辑器-插入HTML标签" href="/newsHtm/76/n_43376.shtml">制作WEB在线编辑器-插入HTML标签</A></li>
<li><A title="文章内容页广告浮于左上角的解决办法" href="/newsHtm/11/n_43311.shtml">文章内容页广告浮于左上角的解决</A></li>
<li><A title="什么叫标准网页设计?" href="/newsHtm/07/n_43307.shtml">什么叫标准网页设计?</A></li>
<li><A title="CSS入门教程篇" href="/newsHtm/92/n_43292.shtml">CSS入门教程篇</A></li>
<li><A title="CSS标签切换代码实例教程 比较漂亮" href="/newsHtm/42/n_42642.shtml">CSS标签切换代码实例教程 比较漂</A></li>
<li><A title="推荐深入理解css中的position定位和z-index属性" href="/newsHtm/34/n_42634.shtml">推荐深入理解css中的position定位和</A></li>
<li><A title="让网页框架透明 底部对齐的代码" href="/newsHtm/07/n_42407.shtml">让网页框架透明 底部对齐的代码</A></li>
<li><A title="网页打开新窗口target=_blank不符合标准" href="/newsHtm/31/n_42131.shtml">网页打开新窗口target=_blank不符合</A></li>

</ul>
</div>

</div></div>
	<div id="control_right">
	<div class="top_bg_small">热点文章</div>
    <div class="top_bg_down_small">
      <p><div class="content_list_left">

<ul>

<li><A title="禁用Backspace键不让退到上一个网页" href="/newsHtm/78/n_1478.shtml">禁用Backspace键不让退到上一个网页</A></li>
<li><A title="html/js在线调试器" href="/newsHtm/40/n_16840.shtml">html/js在线调试器</A></li>
<li><A title="CSS教程之：CSS内间距" href="/newsHtm/03/n_1503.shtml">CSS教程之：CSS内间距</A></li>
<li><A title="控制TextArea限制行数和字符数的方法讲解" href="/newsHtm/77/n_1477.shtml">控制TextArea限制行数和字符数的方</A></li>
<li><A title="as2及as3 flash广告物料中添加clickTAG的方法as3中兼容ie不被拦截的方法" href="/newsHtm/52/n_16852.shtml">as2及as3 flash广告物料中添加click</A></li>
<li><A title="固定右栏宽度, 左栏内容先出现同时自适应宽度的布局" href="/newsHtm/39/n_43639.shtml">固定右栏宽度, 左栏内容先出现同</A></li>
<li><A title="使用css实现全兼容浏览器的三角形" href="/newsHtm/17/n_50917.shtml">使用css实现全兼容浏览器的三角形</A></li>
<li><A title="95%的中国网站需要重写CSS" href="/newsHtm/42/n_43642.shtml">95%的中国网站需要重写CSS</A></li>
<li><A title="IE Bug--浮动对象外补丁的双倍距离的解决方法" href="/newsHtm/37/n_43637.shtml">IE Bug--浮动对象外补丁的双倍距离</A></li>
<li><A title="css实现div居底效果,div居底代码下载" href="/newsHtm/58/n_1458.shtml">css实现div居底效果,div居底代码下</A></li>

</ul>
</div>
 </p>
      </div></div></div>
 
	</div> 
<div id="word_right">
    <div class="right_ad2"><div class="right_content1"><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>
 <div class="right_ad1">
  <div class="right_content">
  <ul id="nav" class="menu_lbg1">
        <li><a href="#" onmouseover="javascript:qmain_menu_lbq(1)" >最新文章</a></li>
        <li class="a1" ></li>
        <li><a href="#" onmouseover="javascript:qmain_menu_lbq(2)">最新日志</a></li>
        <li class="a1"></li>
        <li><a href="#" onmouseover="javascript:qmain_menu_lbq(3)">最新帖子</a></li>
      </ul>
    <div class="change_bottom" id="change_down1"><div>

<ul>
 <li><A title="HTML实现title 属性换行小技巧" href="/newsHtm/43/n_53143.shtml">HTML实现title 属性换行小技巧</A></li>
<li><A title="使用css实现全兼容浏览器的三角形" href="/newsHtm/17/n_50917.shtml">使用css实现全兼容浏览器的三角形</A></li>
<li><A title="<strong>使用css实现全兼容tooltip提示框</strong>" href="/newsHtm/16/n_50916.shtml"> 使用css实现全兼容tooltip提示框 </A></li>
<li><A title="em px的关系" href="/newsHtm/43/n_43643.shtml">em px的关系</A></li>
<li><A title="95%的中国网站需要重写CSS" href="/newsHtm/42/n_43642.shtml">95%的中国网站需要重写CSS</A></li>
<li><A title="在iframe中隐藏横向滚动条的方法大全" href="/newsHtm/41/n_43641.shtml">在iframe中隐藏横向滚动条的方法大全</A></li>
<li><A title="Iframe自适应其加载的内容高度" href="/newsHtm/40/n_43640.shtml">Iframe自适应其加载的内容高度</A></li>
<li><A title="固定右栏宽度, 左栏内容先出现同时自适应宽度的布局" href="/newsHtm/39/n_43639.shtml">固定右栏宽度, 左栏内容先出现同时自适应</A></li>
<li><A title="转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）" href="/newsHtm/38/n_43638.shtml">转载未知大小的图片在一个已知大小容器中</A></li>
  
  </ul>
</div>
</div>
	<div class="change_bottom" id="change_down2" style="display:none"> 
	<ul>
	  <li><A title="不能看到某个圆圈中的数字，就说明某方面潜伏问题" href="/bbs/blog-1-3223.html">不能看到某个圆圈中的数字，就说明某方面潜伏问题</A></li>
    <li><A title="恶搞新交规" href="/bbs/blog-1-3222.html">恶搞新交规</A></li>
    <li><A title="三个故事说穿了许多人" href="/bbs/blog-1-3221.html">三个故事说穿了许多人</A></li>
    <li><A title="Linux下安装、启动MySQL" href="/bbs/blog-267-3220.html">Linux下安装、启动MySQL</A></li>
    <li><A title="学习PHP&MySQL之——字符编码篇（二）" href="/bbs/blog-267-3219.html">学习PHP&MySQL之——字符编码篇（</A></li>
    <li><A title="Navicat连接本地Mysql出现10061错误,但链接远程没有问题的解决方法" href="/bbs/blog-267-3218.html">Navicat连接本地Mysql出现10061错</A></li>
    <li><A title="MySQL Connector/Net 6.6.4 发布" href="/bbs/blog-267-3217.html">MySQL Connector/Net 6.6.</A></li>
    <li><A title="mysql主从同步图" href="/bbs/blog-267-3216.html">mysql主从同步图</A></li>
    <li><A title=""未找到 Oracle 客户端和网络组件。这些组件是.."的解决办法" href="/bbs/blog-267-3215.html">"未找到 Oracle 客户端和网络组</A></li>
    </ul>
	</div>
	<div class="change_bottom" id="change_down3" style="display:none">
	<ul  id="bbs_top10">
	 </ul></div></div>
 </div>
<style>.rmbq a{height:20px;padding:2px;line-height:20px;}</style>
<div class="right_ad1 rmbq">
  <div class="right_content2"><h2 class="tit1">热门标签</h2>

<a href='/tags.php?/%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E6%B5%8B/' class='tagc2'>页面渲染测</a>

<a href='/tags.php?/solaris%E6%93%8D%E4%BD%9C%E7%B3%BB/' class='tagc2'>solaris操作系</a>

<a href='/tags.php?/blockin/' class='tagc2'>blockin</a>

<a href='/tags.php?/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E5%A4%A7%E5%B0%8F/' class='tagc2'>应用程序大小</a>

<a href='/tags.php?/%E5%AF%BC%E5%85%A5excel/' class='tagc2'>导入excel</a>

<a href='/tags.php?/MySQL%E7%94%A8%E6%88%B7/' class='tagc1'>MySQL用户</a>

<a href='/tags.php?/php%E8%BF%87%E6%BB%A4html/' class='tagc2'>php过滤html</a>

<a href='/tags.php?/javascript%E5%8F%98%E9%87%8F/' class='tagc2'>javascript变量</a>

<a href='/tags.php?/started_se/' class='tagc1'>started_se</a>

<a href='/tags.php?/Cluster/' class='tagc2'>Cluster</a>

<a href='/tags.php?/Unavailable/' class='tagc1'>Unavailable</a>

<a href='/tags.php?/CFileDialog/' class='tagc1'>CFileDialog</a>

<a href='/tags.php?/jquery%E5%87%BD%E6%95%B0/' class='tagc2'>jquery函数</a>

<a href='/tags.php?/kitjs/' class='tagc2'>kitjs</a>

<a href='/tags.php?/%E8%A7%A3%E5%8E%8Brar/' class='tagc1'>解压rar</a>

<a href='/tags.php?/%E7%94%A8Pear/' class='tagc1'>用Pear</a>

<a href='/tags.php?/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E5%AE%9E%E7%8E%B0/' class='tagc6'>单例模式实现</a>

<a href='/tags.php?/version/' class='tagc1'>version</a>

<a href='/tags.php?/%E6%8C%91%E9%80%89%E9%80%9F%E5%BA%A6%E5%BF%AB/' class='tagc2'>挑选速度快</a>

<a href='/tags.php?/archivelog/' class='tagc2'>archivelog</a>

<a href='/tags.php?/SQLTuning/' class='tagc1'>SQLTuning</a>

<a href='/tags.php?/https/' class='tagc1'>https</a>

<a href='/tags.php?/Federated/' class='tagc2'>Federated</a>

<a href='/tags.php?/python%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2/' class='tagc2'>python类型转换</a>

<a href='/tags.php?/gzcompress%28%29/' class='tagc1'>gzcompress()</a>

<a href='/tags.php?/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E4%BD%93/' class='tagc1'>自定义字体</a>

<a href='/tags.php?/sqlplus/' class='tagc1'>sqlplus</a>

<a href='/tags.php?/MySql%E7%AE%80%E5%8D%95%E4%B8%8A%E6%89%8B/' class='tagc2'>MySql简单上手</a>

<a href='/tags.php?/php+php%E5%88%9B%E5%BB%BAtag/' class='tagc2'>php php创建tag</a>
 
</div></div>
 </div>

<div class="right_ad1">
  <div class="right_content2"><h2 class="tit1">赞助商链接</h2>
<div align="center">  <script type="text/javascript">
google_ad_client = "pub-2165610513794018";
/* 160x600, 创建于 08-11-28 */
google_ad_slot = "3974845827";
google_ad_width = 160;
google_ad_height = 600;

</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>
 </div>
 
   
</div>
<div class="clear"></div></div>
<div class="clear"></div>
<div id="foot">

<div class="center">
	
<div class="tonglan" id="bottom" align="center">
<p>@CopyRight 2002-2008, 1SOHU.COM, Inc. All Rights Reserved QQ:1010969229</p>
		
<p><a href="http://beian.miit.gov.cn" target="_blank">京ICP备18042785号-1</a>
	
<script language="JavaScript" src="http://s67.cnzz.com/stat.php?id=259003&web_id=259003&show=pic" charset="gb2312"></script>

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19092289-1']);
  _gaq.push(['_setDomainName', '1sohu.com']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb97f11b3c4c68d586839d98f8773582d' type='text/javascript'%3E%3C/script%3E"));
</script>