zoukankan      html  css  js  c++  java
  • 怎么解决浏览器兼容性问题

     

    怎么解决浏览器兼容性问题

    所有浏览器 通用 height: 100px;
    IE6 专用 _height: 100px; IE6 专用 *height: 100px;
    IE7 专用 *+height: 100px; IE7、
    FF 共用 height: 100px !important;

    1.内外边距被统一:

    不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。
    因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码:
    *{margin:0px;padding:0px;}
    借于此,所有标记的内外边距被统一起来。

    2.margin不一致的问题:

    当有多张图片需要排在一行时,我们通常使用“Float:Left”来实现,这样一来,浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display:inline”项即可。

    3.div居中问题:

    通常我们会利用“vertical-align:middle”来实现,这对于搜狗浏览器来说,是正常的,但是对于IE浏览器来说,却并没有效果。对此,一种较好的解决方法是:将文字的行高height-line:设置与div一样时即可解决问题。

    4.important!:

    FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 如115px !important;120px;padding:5px;必须注意的是, !important; 一定要在前面。

    5.给a标签内内容加上样式:

    若需给a标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

    6.FF 和 IE 对 box 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

    7.ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

    8.外部 wrapper :

    作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

    7.手形光标:

    关于手形光标. cursor: pointer.

    8.IE6hover的链接:

    在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一

    些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。

    解决方法很简单:

    1.在(那个未浮动的)内容之后添加一个<span style="clear: both;"> </span>

    2.触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;

    9.IE下z-index的bug

    在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给

    其父级元素定义z-index,有些情况下还需要定义position:relative。

    10.: Overflow Bug

    在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;

    11.怎么解决IE6双倍边距问题display:inline

    解决办法:当将其display属性设置为inline时问题就都解决了。

    总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。

    方法二:,!important解决,比如

    margin-left:10px !important;;

    _margin-left:5px;

     

    12. css实现透明滤镜

    filter:alpha(opacity=12); 支持 IE 浏览器

    -moz-opacity:0.12; 支持 FireFox 浏览器

    opacity:0.12; 支持 Opera,safari 等浏览器

    ps:现在困扰我的就是,背景是实现了透明效果,可是这个层里面的所有元素:CSS实现背景透明效果这几个字也跟着透明了.这个以后我还得努力寻求解决办法,有待解决!

    13.如何对齐文本与文本输入框

     

    加上 vertical-align:middle;

    <style type="text/css">

    <!--

    input {

         200px;

         height:30px;

         border:1px solid red;

         vertical-align:middle;

    }

    -->

    </style>

     

    14.为什么无法定义1px左右高度的容器

    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

     

    15.怎么样才能让层显示在FLASH之上呢

     

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

    <param name="wmode" value="transparent" />

    15. 游标手指cursor   

    cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

  • 相关阅读:
    Android模拟器访问本地的localhost失败及解决方案
    CSS3 @font-face使用实例
    Web字体库下载及转换工具
    Web中常用字体介绍(转)
    CSS3 @font-face详细用法(转)
    HTML5 Canvas Text文本居中实例
    HTML5 Canvas Text实例1
    Html5 Canvas Text
    Wpf Hyperlink超链接控件使用
    MVC使用Exception过滤器自定义处理Action的的异常
  • 原文地址:https://www.cnblogs.com/sntetwt/p/3283197.html
Copyright © 2011-2022 走看看