CSS常见问题及兼容性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
10 header{width:200px;height:200;display:block;background:red;}
11 section{width:400px;height:400;display:block;background:green;}
12 footer{width:200px;height:200;display:block;background:red;}
13 </style>
14 
15 <body>
16     <header>header</header>
17     <section>section</section>
18     <footer>footer</footer>
19 </body>

解决方法2:引入html5shiv.js插件

 

2 元素浮动之后,能设置宽度的话就给元素加宽度,如果需要宽度是内容撑开,就给它里边的块元素加上浮动

解决方案:需要谁去浮动,就把浮动加给谁 

  <style>

.box{
    width
:400;
    border
:1px soild black;
    overflow
:hidden;//清浮动,仅为了演示,不是最好的方法
}
.left
{
    float
:left;
    background-color
:red;
}
.right
{
    float
:right;
    background-color
:green;
}

h2
{
    float
:left; //解决方案:需要谁去浮动,就把浮动加给谁
    margin
:0;
    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:0;}
.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兼容性问题


 

2 display:inline-block

 

3 IE6最小高度问题

 

4 IE6双边距

 

5 li里元素都浮动 li在IE6,7下方会产生4px间隙问题

 

6 浮动元素之间注释,导致多复制一个文字问题 

 

7 IE6,7父级元素的overflow:hidden是包不住子级的relative

 

8 IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和buttom值会有1px的偏差

 

9 IE6下绝对定位元素和浮动元素并列绝对定位元素消失 

 

10 IE6下input 的空隙

 

11 IE6下输入类型表单控件背景问题 

 

以上是关于CSS常见问题及兼容性的主要内容,如果未能解决你的问题,请参考以下文章

CSS 多浏览器兼容性问题及解决方案

css兼容性问题及一些常见问题汇总

CSS 多浏览器兼容性问题及处理方法

前端浏览器JavaScript及CSS兼容总结

CSS Hack技术介绍及常用的Hack技巧

CSS Hack技术介绍及常用的Hack技巧集锦