zoukankan      html  css  js  c++  java

  • HTML兼容问题及解决办法

    1. 标准浏览器子元素不会撑开父元素设置好的宽度，IE6下会的；
      [html] view plain copy
      1. <style>  
      2. .box{ 400px;}  
      3. .left{ 200px;height:300px;background:red;float:left;}  
      4. .right{ 200px;float:right;}  
      5. .div{180px;height:180px;background:blue;padding:15px;}  
      6. </style>  
      7. </head>  
      8. <body>  
      9. <div class="box">  
      10.     <div class="left"></div>  
      11.     <div class="right">  
      12.         <div class="div"></div>  
      13.     </div>  
      14. </div>  
      15. </body>  

    2. [html] view plain copy
      1. <style>  
      2. .box{ 400px;}  
      3. .left{background:red;float:left;}  
      4. .right{float:right; background:blue;}  
      5. h3{margin:0;height:30px; <span style="color:#ff0000;"><strong><em>float:left;</em></strong></span> }  
      6. /*  
      7.     在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动  
      8. */  
      9. </style>  
      10. </head>  
      11. <body>  
      12. <div class="box">  
      13.     <div class="left">  
      14.         <h3>左侧</h3>  
      15.     </div>  
      16.     <div class="right">  
      17.         <h3>右侧</h3>  
      18.     </div>  
      19. </div>  
      20. </body>  
    3. [html] view plain copy
      1. <style>  
      2. .left{100px;height:100px;background:Red; float:left;}  
      3. .right{200px;height:100px;background:blue;(margin-left:100px;)<span style="color:#ff0000;"><em><strong>float:left;</strong></em></span>}  
      4. /*  
      5.     在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动（本问题为3pxBUG）  
      6. */  
      7. </style>  
      8. </head>  
      9. <body>  
      10. <div class="box">  
      11.     <div class="left"></div>  
      12.     <div class="right"></div>  
      13. </div>  
    4. IE6下，最小高度为19px;解决办法：overflow:hidden;
    5. IE 6下，1px dotted #000不支持，解决办法：切背景平铺；
    6. [html] view plain copy
      1. <style>  
      2. body{margin:0;}  
      3. .box{background:blue;border:1px solid #000;<span style="color:#ff0000;"><strong><em>zoom:1;</em></strong></span>}  
      4. .div{200px;height:200px;background:red;margin:100px;}  
      5. /*  
      6.     在IE6下解决margin传递要触发haslayout（解决：<span style="font-family: Arial, Helvetica, sans-serif;">zoom:1;</span>）   
      7.     在IE6下父级有边框的时候，子元素的margin值消失  
      8.       
      9.     解决办法:触发父级的haslayout  
      10. */  
      11. </style>  
      12. </head>  
      13. <body>  
      14. <div class="box">  
      15.     <div class="div"></div>  
      16. </div>  
    7. [html] view plain copy
      1. <style>  
      2. body{margin:0;}  
      3. .box{200px;height:200px;background:Red;float:left;margin:100px;}  
      4. /*  
      5.     IE6下双边距BUG  
      6.     在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍    
      7.     解决办法: <span style="color:#ff0000;"><em><strong>display:inline;</strong></em></span>  
      8. */  
      9. </style>  
      10. </head>  
      11. <body>  
      12. <div class="box"></div>  
      13. </body>  
      [html] view plain copy
      1. <style>  
      2. .box{ float:left;border:10px solid #000;}  
      3. .box div{100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}  
      4. /*  
      5.     margin-right 一行右侧第一个元素有双边距（margin：第一个元素左侧，最后一个右侧有双边距）  
      6.     margin-left 一行左侧第一个元素有双边距  
      7. */  
      8. </style>  
      9. </head>  
      10. <body>  
      11. <div class="box">  
      12.     <div>1</div>  
      13.     <div>2</div>  
      14.     <div>3</div>  
      15.     <div>4</div>  
      16. </div>  
    8. [html] view plain copy
      1. <pre name="code" class="html"><style>  
      2. ul{margin:0;padding:0;302px;}  
      3. li{ list-style:none;height:30px;border:1px solid #000; <strong><em><span style="color:#ff0000;">vertical-align:top;</span></em></strong>}  
      4. a{100px;float:left;height:30px;background:Red;}  
      5. span{100px;float:right;height:30px;background:blue;}</style><pre name="code" class="html"><body><ul><li>  
      6.     <span>  </span><a href="#"></a>  
      7.         <span></span>  
      8.     </li><li>  
      9.     <span>  </span><a href="#"></a>  
      10.         <span></span>  
      11.     </li>  
      12. </ul>  
      13. </body>  
      14.     /*在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙  
      15.     解决办法:  
      16.         1.给li加浮动，还需要加宽度300px;  
      17.         2.给li加vertical-align,,,,,当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动*/  
    9.
    [html] view plain copy
    1. <style>  
    2. .box{border:10px solid #000;600px; overflow:hidden;}  
    3. .box div{100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}  
    4. /*  
    5.     当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效(无解)  
    6. */  
    7. </style>  
    10.  IE6下的文字溢出BUG
    [html] view plain copy
    1. <style>  
    2. .box{ 400px;}  
    3. .left{float:left;}  
    4. .right{400px;float:right;}  
    5. </style>  
    6. </head>  
    7. <body>  
    8. <div class="box">  
    9.     <div class="left"></div>  
    10.     <strong><em><span style="color:#ff0000;"><div></span></em></strong><!-- IE6下的文字溢出BUG --><span></span><span style="color:#ff0000;"><em><strong></div></strong></em></span>  
    11.     <div class="right">↓leo是个大胖子</div>  
    12. </div>  
    13. <!--  
    14.     子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素     
    15.     解决办法:用div把注释或者内嵌元素用div包起来     
    16. -->  
    17. </body>  
    11.
    [html] view plain copy
    1. <style>  
    2. .box{ 200px;height:200px;border:1px solid #000; position:relative;}  
    3. span{50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}  
    4. ul{150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}  
    5. /*  
    6.     当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失  
    7.     解决办法:  
    8.         给定位元素外面包个div  
    9. */  
    10. </style>  
    11. </head>  
    12. <body>  
    13. <div class="box">  
    14.     <span style="color:#ff0000;"><strong><em><div></em></strong></span><ul></ul><span style="color:#ff0000;"><em><strong></div></strong></em></span>  
    15.     <span></span>  
    16. </div>  
    17. </body>  

    12.
    [html] view plain copy
    1. <style>  
    2. .box{ 200px;height:200px;border:1px solid #000; overflow:auto;<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color:#ff0000;"><em><strong>position:relative;</strong></em></span></span><span style="font-family: Arial, Helvetica, sans-serif;"> }</span>  
    3. .div{ 150px;height:300px;background:yellow; position:relative;}  
    4. /*  
    5.     在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素      
    6.     解决办法: 给父级也加相对定位  
    7. */  
    8. </style>  
    9. </head>  
    10. <body>  
    11. <div class="box">  
    12.     <div class="div"></div>  
    13. </div>  
    14. </body>  

    13.
    [html] view plain copy
    1. <style>  
    2. .box{201px;height:201px;border:1px solid #000; position:relative;}  
    3. .box span{ 20px;height:20px;background:yellow; position:absolute;right:-1px;bottom:-1px;}  
    4. /*  
    5.     在IE6下绝对定位元素的父级宽和高是奇数的时候，元素的right值和bottom值会有1px的偏差  
    6. */  
    7. </style>  
    14.透明度；opacity:0~1;filter:alpha(opacity=0~100);
    15.
    [html] view plain copy
    1. <style>  
    2. .box{ 200px;height:32px;border:1px solid red;}  
    3. input{100px;height:30px;border:1px solid #000;margin:0;padding:0;<em><strong><span style="color:#ff0000;"> float:left</span></strong></em>}  
    4. /*  在IE6，7下输入类型的表单控件上下各有1px的间隙    
    5.     解决办法:给input加浮动    
    6. <span style="white-space:pre">    </span>在IE6，7下输入类型的表单控件加border:none;无效    
    7. <span style="white-space:pre">    </span>解决办法: 重置input的背景  background:#fff;   
    8. <span style="white-space:pre">    </span>在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动  
    9. <span style="white-space:pre">    </span>解决办法: 把背景图片加给父级，清掉自身背景<span style="font-family: Arial, Helvetica, sans-serif;">  
    10. */</span><pre name="code" class="html"></style>  
    11. </head>  
    12. <body>  
    13. <div class="box">  
    14.     <input type="text" />  
    15. </div>  
    16. </body>  
    16.css hack不建议使用
    [html] view plain copy
    1. <style>  
    2. .box{ 100px;height:100px;background:Red;background:blue9; +background:yellow;_background:green;}  
    3. @media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}  
    4. /*  
    5. css hack：  
    6.     9    IE10(包括)之前的IE浏览器解析  
    7.     +,*   IE7（包括）包括IE7之前的IE浏览器解析  
    8.     _     IE6包括IE6之前的IE浏览器    
    9. */  
    10. </style>  
    17. !important  提升优先级
    [html] view plain copy
    1. <style>  
    2. .box{100px;height:100px;background:red !important;background:pink;}  
    3. /*  
    4.     在IE6下 在important 后边在家一条同样的样式，会破坏掉important的作用，会按照默认的优先级顺序来走  
    5. */  
    6. </style>  
    7. </head>  
    8. <body>  
    9. <div class="box" style="background:#000;"></div>  
    10. </body>  

    18.圣杯布局：左右宽度固定，中间宽度自适应伸缩，并且中间先加载
    [html] view plain copy
    1. style>  
    2. body{margin:0;}  
    3. .center{height:600px;background:#f60;margin:0 200px;}  
    4. .left{200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}  
    5. .right{200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}  
    6. </style>  
    7. </head>  
    8. <body>  
    9. <div class="center"></div>  
    10. <div class="left"></div>  
    11. <div class="right"></div>  
    12. </body>  
    等高布局：
    [html] view plain copy
    1. <style>  
    2. body{margin:0;}  
    3. .wrap{ 900px;margin:0 auto;overflow:hidden;}  
    4. .left{200px;background:Red;float:left;padding-bottom:10000px;margin-bottom:-10000px;}  
    5. .right{700px;background:blue;float:right;padding-bottom:10000px;margin-bottom:-10000px;}  
    6. </style>  

    19.img外部的border
    产生条件：img外部有a标签，即img标签有链接时
    解决办法：设置img边框border:0;
    20.图片默认有边距
    产生条件：img标签（每个img之后敲了回车）
     解决办法：为img设置float的浮动布局方式。
  • 相关阅读:
    iOS_核心动画（二）
    iOS_核心动画CALayer（一）
    iOS_KVC与KVO
    iOS_Quartz 2D绘图
    iOS_触摸事件与手势识别
    iOS_多线程（二）
    iOS_多线程（一）
    iOS_UIAlertController
    CTF-Pwn-[BJDCTF 2nd]diff
    数据结构--队列（Java实现）
  • 原文地址：https://www.cnblogs.com/baota/p/6957730.html
Copyright © 2011-2022 走看看