CSS常见问题及兼容性
CSS常见问题
1 （IE6，7）H5标签兼容
解决方法1：（只显示核心代码）
1<script>
2 //通过js动态的去创建H5标签
3 document.createElement("header");
4 document.createElement("section");
5 document.createElement("footer");
6 </script>
7
8 <style>
9 //由于它默认的是不识别的，所以把这个标签理解为自定义标签，自定义标签默认就是内联元素，内联元素不支持宽高，所以我们要将其转换成块元素——display:block
header{width:200px;height:;display:block;background:red;}
section{width:400px;height:;display:block;background:green;}
footer{width:200px;height:;display:block;background:red;}
</style>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
解决方法2：引入html5shiv.js插件
2 元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，就给它里边的块元素加上浮动
解决方案：需要谁去浮动，就把浮动加给谁
<style>
.box{
width:;
border:1px soild black;
overflow:hidden;//清浮动，仅为了演示，不是最好的方法
}
.left{
float:left;
background-color:red;
}
.right{
float:right;
background-color:green;
}
h2{
float:left; //解决方案：需要谁去浮动，就把浮动加给谁
margin:;
height:30px;
}
</style>
<body>
<div class="box">
<div class="left>
<h2>left</h2>
</div>
<div class="right>
<h2>right</h2>
</div>
</div>
3 第一块元素浮动，第二块元素加margin值等于第一块元素 在IE6下会有间隙问题
解决方案：1 不建议这么写 2 如非要这样写，建议用浮动解决，不用margin
<style>
body{margin:;}
.box{width:300px;}
.left{
width:200px;
height:200px;
backgrong-color:red;
float:left;
}
.right{
width:200px;
height:200px;
backgrong-color:blue;
// margin-left:200px;
float:left;//解决方案：用浮动解决
} <body>
<div class="box>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
4 IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：不要让子元素的宽高超过父级
<style>
.box{
width:200px;
height:200px;
border:10px soild #000;
}
//解决方案，不要让子元素的宽高超过父级，即content的width<box的width .content{
width:400px;
height:400px;
background-color:red;
}
</style> <body>
<div class="box">
<div class="content"></div>
</div>
</body>
5 p 包含块元素嵌套规则
注意：<p>,< td >,<H1-H6>这三个标签不能嵌套块元素
CSS兼容性问题
1 margin兼容性问题
解决方案：
margin-top传递——解决：触发BFC,haslayout
上下margin叠压——解决：尽量使用同一方向的margin,比如都设置top,buttom
<style>
.box{
background-color:green;
overflow:hidden;
zoom:;//触发haslayout
}
.item{
height:50px;
background-color:red;
//margin:50px;
margin-top:50px;//尽量使用同一方向的margin
}
.mt100{
margin-top:100px;
}
</style>
<!--
1 margin-top传递——解决：触发BFC,haslayout
2 上下margin叠压——解决：尽量使用同一方向的margin,比如都设置top,buttom
-->
<body>
<div class="box">
<div class="item"></div>
<div class="item mt100"></div>
</div>
</body>
2 IE6不支持display:inline-block
解决方案：
针对ie6,7添加*display:inlline;
*zoom:1;
<style>
div{
width:100px;
height:100px;
background-color:red;
display:inline-block;
//触发haslayout
*display:inline;
*zoom:;
}
</style> <body>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
3 IE6最小高度问题（ IE6下最小高度19px）
解决方案：
针对ie6,7添加overflow:hidden;
<style>
div{
height:1px;//IE6最小高度19px，相差甚远，无法忽视
background-color:red;
overflow:hidden;//解决方案
}
</style>
<body>
<div>div</div>
</body>
4 IE6，7 双边距
当元素浮动后再设置margin，那么就会产生双倍边距
解决方案：
针对ie6,7添加*display:inline;
<style>
body{
margin:;
}
.box{
width:750px;
border:1px solid #000;
overflow:hidden;//解决浮动，只是方便样式，不是最好方案
}
.item{
width:200px;
height:200px;
background-color:red;
margin-left:50px;
float:left;
*display:inline;//解决方案
</style> <body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
5 li里元素都浮动 li在IE6,7下方会产生4px间隙问题
解决方案：
针对ie6,7添加*vertical-align:top
<style>
.list{
margin:;
padding:;
list-style:none;
width:300px;
}
.list li{
height:30px;
border:1px solid red;
line-height:30px;
*vertical-align:top;//解决方案
}
.list li a{
float:left;
}
.list li span{
float:right;
}
</style> <body>
<ul class="list">
<li>
<a href="">left</a>
<span>right</span>
</li>
<li>
<a href="">left</a>
<span>right</span>
</li>
<li>
<a href="">left</a>
<span>right</span>
</li>
</ul>
</body>
6 浮动元素之间注释，导致多复制一个文字问题 (小尾巴)
两个浮动元素中间有注释或者内联元素并且和父级宽度和相差不超过3px
解决方案：
1 两个浮动元素中间避免出现内联元素或注释
2 与父级宽度相处3px或以上
<style>
.wrap{
width:400px;
}
.left{
float:left;
}
.right{
width:397px;//与父级宽度相差3px或以上
float:right;
}
</style> <body>
<div class="wrap">
<div class="left"></div>
//两个浮动元素中间避免出现内联元素或注释
<span></span>
<!-- IE下文字溢出BUG -->
<div class="right"></div>
</div>
</body>
7 IE6,7父级元素的overflow:hidden是包不住子级的relative
解决方案：
针对ie6,7给父级元素添加相对定位，让父级和子级处于同一环境下
<style>
.box{
width:400px;
height:400px;
background-color:red;
border:1px solid black;
overflow:hidden;
*position:relative;//解决方案
}
.content{
width:600px;
height:600px;
background-color:blue;
position:relative;
}
</style>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
8 IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和buttom值会有1px的偏差
解决方案：
避免父级宽高出现奇数
<style>
.box{
width:307px;
height:307px;
background-color:red;
border:1px solid black;
position:relative/absolute;
}
.content{
width:100px;
height:100px;
background-color:blue;
position:absolute;
right:;
bottom:;
} </style> <body>
<div class="box">
<div class="content"></div>
</div>
</body>
9 IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：
避免他们绝对定位元素和浮动元素同级并列
<style>
.box{
width:300px;
height:300px;
border:1px solid black;
position:relative;
}
.item{
width:200px;
height:200px;
background-color:blue;
float:left;
margin-left:50px;
*display:inline;
}
.box span{
width:100px;
height:100px;
background-color:black;
position:absolute;
right:-10px;
top:-10px;
} </style> <body>
<div class="box">
//避免
<div class="item"></div>
<span></span>
</div>
</body>
10 IE6下input 的空隙
解决方案：
给input元素添加float
<style>
.box{
width:300px;
background-color:blue;
border:1px solid black;
}
.box input{
width:300px;
height:30px;
background-color:blue;
border:;
margin:0px;
*float:left;//解决方案
}
</style>
<body>
<div class="box">
<input type="text"/>
</div>
</body>
11 IE6下输入类型表单控件背景问题
解决方案：
针对ie6,7设置background-attachment:fixed;
<style>
input{
background:url("img/img.jpg") no-repeat fixed;
}
</style> <body>
<input type="text"/>
</body>
CSS hack
针对不同的浏览器写不同的css样式的过程，就叫css hack
<style>
div{
width:200px;
height:200px;
background-color:red;
background-color:blue\9;//\9 IE10以及IE10以下版本的
*background-color:red; // * IE7以及IE7以下版本的
_background-color:blue; // _ IE6以及IE6以下版本的
} <body>
<div></div>
</body>
PNG24兼容性问题
IE6不支持png24图片
解决方案 ：
JS插件（问题：不能处理body之上png24）
DD_belatedPNG.lix('xxx');
<script src="js/DD_belatedPNG_0.0.Ba.js></script>
//不能处理body之上png24
<script>
DD_belatedPNG.fix("img,div");//选择器，需要对哪个元素进行处理就选择哪个，多个用,隔开
</script> <style>
body{
background-color:red;
}
div{
width:300px;
height:300px;
background:url("img/png.png") no-repeat;
}
</style> <body>
<div></div>
<img src="img/png.png" alt=""/>
</body>
原生滤镜
_background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png",sizingMethod="crop");
<script src="js/DD_belatedPNG_O.O.Ba.js></script>
//不能处理body之上png24
<script>
DD_belatedPNG.fix("body");
</script> <style>
body{
width:300px;
height:300px;
background:red url("img/png.png") no-repeat;
_background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png",sizingMethod="crop");
} </style> <body>
</body>
CSS常见问题及兼容性的更多相关文章
- CSS+JS实现兼容性很好的无限级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]
css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...
- XHTML CSS 常见问题和解决方案
原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...
- CSS 常见问题笔记
CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...
- CSS 多浏览器兼容性问题及解决方案
兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- 实战中总结出来的CSS常见问题及解决办法
一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...
- 在sublimen中整理CSS代码及其兼容性问题
1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换 点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...
- CSS 选择器的兼容性
参考网站 http://blog.csdn.net/yume_sola/article/details/70215695 http://www.youdiancms.com/jianrong/614. ...
- Css几个兼容性问题
1.BUG_fireFox!!!一个容器内的子容器如果要左右浮动的话,需要在这个容器设置上样式:"overflow:hidden". 注:内部元素浮动就会导致外面的容器的高度在fi ...
随机推荐
- 产品设计中先熟练使用铅笔 不要依赖Axure
在互联网产品领域,Axure已成为产品经理.产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解 ...
- 【转】如何使用TestFlight进行Beta测试 -- 不错
原文网址:http://www.cocoachina.com/ios/20141022/10009.html 假如你现在完成一个App的开发并准备进行真机测试,那么请问你会怎么做呢?难道是直截了当的把 ...
- 解决Windows8系统磁盘占用太多100%或99%
关闭家庭组功能:WIN+R运行Services.msc,找到 HomeGroup Listener 和 HomeGroup Provider 服务,分别停止和禁用这2个服务.然后重新启动Windows ...
- EntityFramework 基础提供程序在 Open 上失败。
问题 System.Data.EntityException: 基础提供程序在 Open 上失败. ---> System.Data.SqlClient.SqlException: 在与 SQL ...
- ADB对手机进行开关机测试
Verify issue 时,其中有条要对手机进行开关机100次,由于只有ADB环境,只能用批处理来写脚本了,代码如下: ::需配置ADB环境,开启Debug模式 ::start循环 :start s ...
- Service Oriented Architecture and WCF 【转】
http://www.codeproject.com/Articles/515253/Service-Oriented-Architecture-and-WCF Introduction This a ...
- 升级到 ExtJS 5的过程记录
升级到 ExtJS 5的过程记录 最近为公司的一个项目创建了一个 ExtJS 5 的分支,顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑.由于 Sencha Cmd 的 sencha ...
- 破解安装 SecureCRT 7.0.2 for mac完美破解版，mac secureCRT ， apple secureCRT
mac secureCRT , apple secureCRT 下载地址:http://download.csdn.net/detail/guolichun/7733069 破解安装 SecureC ...
- Delphi的四舍五入函数
一.四舍五入法 四舍五入是一种应用非常广泛的近似计算方法,其有算术舍入法和银行家舍入法两种. 所谓算术舍入法,就是我们通常意义上的四舍五入法.其规则是:当舍去位的数值大于等于5时,在舍去该 ...
- Package org.xml.sax Description
This package provides the core SAX APIs. Some SAX1 APIs are deprecated to encourage integration(集成:综 ...