模板酷站
电脑版
提示:
原网页
已由神马搜索转码, 内容由
www.mb5u.com
提供.
无忧首页
网页模板
程序模板
建站教程
视频教程
更多导航↓
网页特效
图标素材
字体下载
站长工具
站长问答
CMS教程
Div+Css教程
网站制作教程
网站运营
网络编程
服务器教程
站长工具
Div+Css教程
模板无忧
>
建站教程
>
Div+Css教程
>
Div+CSS教程
>
两个层之间的为什么会有间隙(IE3pxbug)?_Div+CSS教程
编辑Tag赚U币
教程Tag:
暂无Tag,欢迎
添加
,赚取U币!
织梦DedeCMS视频教程
买空间 租服务器 选网硕互联!
无忧站长工具,百度权重一键全查!
这个问题普遍的困扰着新手朋友,不知道如何是好,想不出办法进行解决。
其实这就是传说中的“IE 3px bug”。解决的办法也比较简单。请看下面的示例说明。
IE中两个层之间的间隙(IE 3px bug)
代码调试框
[www.mb5u.com]
<!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=utf-8" /> <title>mb5u.com</title> <style type="text/css"> #left { float:left; width:200px; height:100px; background:#f00; } #right { width:200px; height:100px; background:#fc0; } </style> </head> <body> <div id="left">mb5u.com</div> <div id="right">mb5u.com</div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
解决3px bug的方法之浮动法float
此例中,我们给右边的层,应用float:left;浮动,即可解决IE 3px bug。
代码调试框
[www.mb5u.com]
<!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=utf-8" /> <title>mb5u.com</title> <style type="text/css"> #left { float:left; width:200px; height:100px; background:#f00; } #right { float:left; width:200px; height:100px; background:#fc0; } </style> </head> <body> <div id="left">mb5u.com</div> <div id="right">mb5u.com</div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
解决3px bug的方法之障眼法
此例中,我们给左边的层,应用margin-right:-3px;,同样可解决IE 3px bug。
代码调试框
[www.mb5u.com]
<!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=utf-8" /> <title>mb5u.com</title> <style type="text/css"> #left { float:left; width:200px; height:100px; margin-right:-3px; background:#f00; } #right { width:200px; height:100px; background:#fc0; } </style> </head> <body> <div id="left">mb5u.com</div> <div id="right">mb5u.com</div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
网站制作在线视频教程
网站制作视频教程打包下载
DIV+CSS模板
CSS视频教程
CSS设计彻底研究视频教程
网页制作基础教程
网站重构&web标准设计教程
div css视频教程
来源:无忧整理
/
所属分类:
Div+CSS教程
/
更新时间:2007-01-08
最新评论:
暂时还没人评论! 快来抢沙发啊!
请在这里输入您要发表的评论信息! 理智评论,文明上网,共建和谐网络. 严禁广告、谩骂等不良信息.
匿名评论
相关
Div+CSS教程
:
DIV+CSS设计的误区
CSS基础:常用CSS英文字体介绍
IE6和IE7中border边框断线现象
border:none;与border:0;的有什么不同?
div+css下js对联广告不随屏幕滚动的解决方法
HTML元素的ID和Name属性的区别
divcss教程:深入了解css的行高Line Height属性
CSS文档流,块级元素和内联元素
5个你该知道的CSS3新技术
用正则表达式替换a标记href值
30个优秀的CSS导航和按钮设计教程
css中px和em有什么区别
Div+Css教程搜索
Div+CSS教程推荐
Web标准化之form语义结构的实例
web标准中IE无法设置滚动条颜色解决方法
纯CSS Lightbox效果
Transparencecssmenu如何制作透明的CSS菜单
CSS基础:常用CSS英文字体介绍
用正则表达式替换a标记href值
css中px和em有什么区别
CSS一列固定宽度居中
解决列高度自适应的五种方法!
如何制作可控制显示或隐藏的伸缩式DIV CSS新闻列表?
猜你也喜欢看这些
鼠标指住(hover)变色的按钮演示demo
CSS布局教程:用DIV CSS实现国内经典式三行两列布局
DIV CSS布局实例:半透明阴影效果的实现
CSS菜单实例:极致而简约的风格
Div CSS实例:如何用CSS实现背景半透明效果
DIVCSS横向菜单实例:简单的思路陷下的风格不错的效果
用css网站布局之十步实录!(十)
DIVCSS布局实例:各种2栏3栏布局实例(附下载)
css背景渐变的技巧与方法
CSS菜单:明快清新的格调阐述CSS当前页效果的实现
新热推荐
1
/
3
dedecms模板_简洁大气的网络设计工作室模板
织梦蓝色简洁新闻资讯门户模板下载(原创)
织梦橙黑清新炫酷工作室模板(视频演示)
织梦文章/新闻资讯/博客模板(仿chinaz最新版,蓝色简洁大气)
Wordpress淘宝客程序(淘金渡-强大自动采集功能 可做返利类淘宝客网站)
精仿大前端D8主题织梦模板下载
织梦网络工作室模板,2013年最新设计,大气美观
织梦科技IT资讯类博客模板(仿虎嗅网织梦模板)
dedecms织梦漫画网站模板(带采集+漫画连载)
织梦dedecms文章模板博客模板-可自定义颜色
PhotoShop鼠绘超酷的游戏场景
Photoshop实例教程:照片漫画插画效果的制作
相关链接:
复制本页链接
|
搜索两个层之间的为什么会有间隙(IE3pxbug)?
教程说明:
Div+CSS教程
-
两个层之间的为什么会有间隙(IE3pxbug)?
。