zoukankan      html  css  js  c++  java
  • DIV+CSS 常见问题及解决办法整理

    http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E6%95%B4%E7%90%86.html

    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">&nbsp;</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。

  • 相关阅读:
    Vue2.0组件实现动态搜索引擎(一)
    6款 jQuery Lightbox图片查看触控插件
    js学习总结----移动端概述和hybird模式
    js学习总结----less常用的方法
    js学习总结----less的基础语法和使用
    js学习总结----less基础和编译
    js学习总结----柯里化函数
    js学习总结----案例分页之前端代码实现和请求处理
    js学习总结----案例分页之服务器内容和数据的处理
    js学习总结----案例分页之需求分析和制定api文档及测试数据
  • 原文地址:https://www.cnblogs.com/peterli2013/p/4286676.html
Copyright © 2011-2022 走看看