CSS兼容性问题:浮动下降--浮动元素后面的元素设定宽度会下降

作者:日期:2011-04-26 10:39:57 点击:437

 看下面的代码,这个网页中有两个浏览器兼容性问题,解决的方法在代码后面给了正确的代码

<!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" />
<title>无标题文档</title>
<style type="text/css">
#demo1{ margin:0; padding:0; font-size:12px; font-weight:normal; width:150px; border:1px red solid;}
#demo1 a{float:right; }
#demo2{ margin:0; padding:0; font-size:12px; font-weight:normal; width:150px; border:1px red solid;}
#demo2 a{float:left;}
#demo2 span{float:left}
#demo3 div{float:left;}
</style>
</head>
 
<body>
<h3 id="demo1">
课程介绍<a href="#">更多...</a>
</h3>
这个h3里的超链接在IE6里会错行,如果把上面的样式改成如下(用定位来做):
#demo1{ margin:0; padding:0; font-size:12px; font-weight:normal; width:150px; border:1px red solid; position:relative;}
#demo1 a{float:right; position:absolute; right:0;}
这样即可

<h3 id="demo2">
<span>课程介绍</span><a href="#">更多...</a>
</h3>
如果把“课程介绍”也套在一个标记里,然后让它左浮动,再让超链接右浮动,也可以解决兼容性问题

 
下面这个问题是浮动下降的问题,由于id="question"的这个元素设定了宽度,则在IE里它和上一个标记:img,会错行,也就实行不了图文混排的效果。解决的办法是去掉id="question"的元素样式里的width:100%这句,也就是说不能给它设定宽度
 
<div id="demo4">
         <img src="我的学习/aaa.jpg" width="125" height="94" style="float:left; margin:10px; " />
        <div style="width:100%; background:#9C9"  id="question">
         <div style="height:20px; background:red; ">asdf</div>
<div style="height:20px; background:red; float:left;">asdf</div>
美国是世界上暴力犯罪最严重的国家,公民的生命、财产和人身安全得不到应有的保障。
 
  美国每年约有1/5的人成为各种犯罪行为的受害者,这一比例居全世界之首。(注1)美国司法部司法统计局2010年10月13日的报告显示,美国12岁以上公民2009年共经历430万起暴力犯罪、1560万起财产犯罪和13.3万起个人盗窃犯罪,犯罪率为每千人17.1起。(注2)美国多座城市犯罪率激增。密苏里州的圣路易斯市平均每10万名居民经历暴力犯罪2070多起,成为美国最危险城市。(注3)底特律市每年发生恶性暴力案件1.5万多起,平均每10万人经历暴力事件1600起。2010年,美国费城、芝加哥、洛杉矶、纽约四大城市的凶杀案件均比2009年增多。(注4)2010年3月29日至4月4日,洛杉矶郡一周发生25起凶杀案;2010年上半年,洛杉矶郡凶杀死亡人数高达373人。(注5)截至11月11日,纽约市共发生凶杀案464起,较2009年同期的400起增长16%。(注6)
</div>
 
</div>
</body>
</html>
 

上一篇: CSS兼容性问题:li浮动后失去项目符号

下一篇: display:inline-block怎么用,你知道吗?