DIV+CSS 常见问题及解决办法整理
http://www.ituring.com.cn/article/64951
1. 【IE6】浮动双倍边距bug:
问题 :同时使用“float”和“margin”,则margin在IE6下实际显示为双倍。
解决:给浮动容器定义display:inline
demo:
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>css 双边距问题</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .float-box {
- float: left;
- width: 150px;
- height: 150px;
- margin: 5px 0 5px 300px;
- /*display: inline;*/
- /*外边距的最后一个值保证了300像素的距离*/
- }
- </style>
- </head>
- <body>
- <div class="float-box">
- 双边距bug(IE6)
- </div>
- </body>
- </html>
2. 【IE6】width和height值 = 最小值
问题:IE6不认min-height,但hight=min-height。若只设定min-height,IE6下等于没有高度;若只设定高度,IE6会自动将内容撑大。标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的。
解决:
height: auto!important; /*使其他浏览器高度自适应*/
height: 100px; /*针对IE6 最小高度*/
min-height: 100px; /*针对其他浏览器最小高度*/
demo
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>IE6 min-height 不认问题</title>
- <style>
- body {
- font-family: Arial, Helvetica, 宋体, sans-serif;
- font-size: 12px;
- text-align: center;
- background-color: #D4D5CC;
- }
- #wrapper {
- height: auto !important; /*使其他浏览器高度自适应*/
- height: 500px; /*针对IE6 最小高度*/
- min-height: 500px; /*针对其他浏览器最小高度*/
- width: 760px;
- background-color: #e5e5e5;
- border: 1px solid #fff;
- text-align: left;
- line-height: 150%;
- padding: 20px;
- margin: 10px auto;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- Hello World <br/>
- Hello World <br/>
- Hello World <br/>
- Hello World <br/>
- Hello World <br/>
- Hello World <br/>
- </div>
- </body>
- </html>
3. 【IE6】为什么无法定义1px左右高度的容器?
问题:这是因为默认的行高造成的
解决:(选择一种)
①、overflow:hidden;
②、zoom:0.08;
③、line-height:1px;
demo:
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>IE6 div 不能实现1px 高度的几种解决方法</title>
- <style>
- .test {
- font-size: 0px;
- height: 1px;
- line-height: 1px;
- background-color: red;
- }
- .test2 {
- height: 1px;
- overflow: hidden;
- background-color: red;
- }
- /*.test3 {*/
- /*height: 1px;*/
- /*zoom: 0.08;*/
- /*background-color: red;*/
- /*}*/
- </style>
- </head>
- <body>
- <div class="test"> </div>
- <div class="test2"></div>
- <div class="test3"></div>
- </body>
- </html>
4. 【IE6】mirror margin bug
问题:当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题
解决:外层元素设定border 或 设定float。
DIV+CSS 常见问题及解决办法整理的更多相关文章
- 实战中总结出来的CSS常见问题及解决办法
一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...
- PHPmailer发送邮件时的常见问题及解决办法
来源:http://www.chinastor.com/a/jishu/mailserver/0G392262014.html 使用PHPmailer发送邮件时的常见问题总结: 一,没有定义发送邮箱$ ...
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- FineUIMvc 常见问题及解决办法
Ø 简介 FineUIMvc 是基于 jQuery 的专业 ASP.NET MVC/Core 控件库,本文主要介绍 FineUIMvc 的常见问题及解决办法. 1. View 中无法调用 Htm ...
- fetch使用的常见问题及其解决办法
摘自: https://segmentfault.com/a/1190000008484070 fetch使用的常见问题及其解决办法 javascript wonyun 2月25日发布 | 0 收 ...
- fetch的常见问题及其解决办法
摘要: 玩转fetch. 作者:wonyun 原文:fetch使用的常见问题及其解决办法 Fundebug经授权转载,版权归原作者所有. 首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以 ...
- WebView加载本地html、js文件常见问题及解决办法
声明:基于android studio平台,php语言搭建服务器 目录: 一.JavaScript脚本语言没有反应 二.alert无法弹出 三.html页面之间不能跳转 四.屏幕缩放没有达到预期效果 ...
- rsync @ERROR: auth failed on module backup 解决思路及附录rsync常见问题及解决办法
昨晚小版本上线,使用rsync往服务器上传文件时,client报如下异常: @ERROR: auth failed on module backup rsync error: error starti ...
- ORA-00907: 缺失右括号,原因及解决办法整理
ORA-00907: 缺失右括号,原因及解决办法整理 1 union all中order by 导致缺失右括号 在有union all的子查询中使用了order by,会导致缺失右括号的错误,事实上在 ...
随机推荐
- windows MySQL 安装
MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...
- Windows下将ImageMagick移植到Android平台
Windows下将ImageMagick移植到Android平台 原文链接 http://www.pedant.cn/2014/06/18/imagemagick-ported-android/ I ...
- python smtplib.SMTPDataError: (554
- 使用HttpUtils 上传视频文件
private void shangchuan(){ //文件的路径 //File file=new File(path); File fi ...
- Camera Path插件的使用
rpg游戏类型的游戏,猪脚走过一个个场景,一个个死角.拐弯处,摄像机镜头也能很好的跟踪对焦,很多朋友都会想,这摄像机如何智能跟踪并且对焦呢? 之前 itween也有demo,但它做法是 两条线,一条摄 ...
- HDU1865--More is better(统计并查集的秩(元素个数))
More is better Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 327680/102400 K (Java/Others) ...
- CodeForces 670 A. Holidays(模拟)
Description On the planet Mars a year lasts exactly n days (there are no leap years on Mars). But Ma ...
- Itext简绍及操作PDF文件
iText简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文件转 ...
- HDU 1934 树状数组 也可以用线段树
http://acm.hdu.edu.cn/showproblem.php?pid=1394 或者是我自己挂的专题http://acm.hust.edu.cn/vjudge/contest/view. ...
- httpwebrequest 模拟登录 获取cookies 以前的代码,记录备忘!
2个类,一个基类,一个构建头信息调用类 关于如何获取到post中的内容,你之需要用http抓包工具把你与目标网站的请求信息抓下来后,打开分析下按照抓下来的包中的数 据进行构建就行了 using Sys ...