zoukankan      html  css  js  c++  java
  • web前端兼容性整理+完善

    【技巧类】

    1、对一些标签统一规范。

    2、padding,marign,height,width

    写好标准头

    1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    2 <html xmlns=”http://www.w3.org/1999/xhtml”>


    高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding

     

    clear:both;

    1 .clearfix:after {
    2 
    3    content: ".";
    4    display: block;
    5    height: 0;
    6    clear: both;
    7    visibility: hidden;
    8 
    9 }

    【兼容方法类】

    1、背景、图片类

    >> background显示问题
    全部注意补齐 width,height 属性
    >>背景透明问题
    IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
    IE: filter: alpha(opacity=10);
    FF: opacity:0.6;
    FF: -moz-opacity:0.10;
    最好两个都写,并将opacity属性放在下面

    2、min-height最小高度的实现(兼容IE6、IE7、FF)

    作用是:当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。

    1 #id {
    2   background:#ccc;
    3   min-height:100px;
    4   height:auto !important;
    5   height:100px;
    6   overflow:visible;
    7 }

     

    3、跨浏览器的CSS透明度

    1 .transparent { 
    2    opacity: 0.7; 
    3    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    4    filter: alpha(opacity=70); 
    5    -moz-opacity: 0.7; 
    6    -khtml-opacity: 0.7;
    7 }
    8  

    4、文字阴影、box阴影(CSS3)

    1 .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
    2 .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

    5、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片

    iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。内嵌文档时一个完整的页面,有HTML,BODY等属性。这样遇到了一个问题,如果样式表中对BODY定义过背景色/背景图片,那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片:
    【1】去掉背景色:filter:Chroma(Color=white);
    举例:<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
    【2】去掉背景图片:
    举例:<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
    注意:内嵌页面同时也要增加BODY属性:
    <body bgcolor="transparent" style='background:transparent'>

    6、怎么样才能让层显示在FLASH之上呢?

    解决的办法是给FLASH设置透明:

    1 <a href="http://www.chinaz.com/">:</a>
    2 <pre lang="html" line="1">
    3 <param name="wmode" value="transparent" />

    7、怎样使一个div层居中于浏览器中?

     1 <style type="text/css">
     2 <!--
     3 div {
     4    position:absolute;
     5    top:50%;
     6    left:50%;
     7    margin:-100px 0 0 -100px;
     8    width:200px;
     9    height:200px;
    10    border:1px solid red;
    11 }
    12 -->
    13 </style>

    8、文字与表单对齐方法?

    设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:

    1 body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

     

    9、optgroup标签的用法?

    optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组:例子:

     1 <select id="selectId">
     2     <optgroup label="GROUP ONE">
     3        <option value="1">one select</option>
     4        <option value="2">two select</option>
     5     </optgroup>
     6     <optgroup label="GROUP TWO">
     7        <option value="3">three select</option>
     8        <option value="4">four select</option>
     9     </optgroup>
    10 </select>
    11  

    效果图:

     

    10、文字与图片垂直居中对齐方法?

    为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};

    例如:
    <p>我要的坚强<img src="i/image.gif" /></p>
    只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中。

    11、网页设计中的默认字体

    1 font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;

    说明:line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高,对于12px字体,这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。

    12、浏览器兼容——常用的css hack

    (1).title{ height:200px;*height:200px;_height:200px; }

    (2).title{ height:200px;*height:200px !important;*height:200px; }

    (3).title{ height:200px; }
             *html.title{ height:200px;}
             *+html.title{ height:200px;}

     

  • 相关阅读:
    Solr简介
    儿童节快乐
    添加新的内容分类
    weka
    Junit测试样例
    Linux MySQL单实例源码编译安装5.5.32
    perconatoolkit 工具集安装
    Linux MySQL单实例源码编译安装5.6
    MySQL 开机自启动
    mysql5.6之前需要账号的安全加固
  • 原文地址:https://www.cnblogs.com/lstory/p/7212258.html
Copyright © 2011-2022 走看看