所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

  常见的浏览器兼容问题有以下内容:

问题1:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题描述:块状元素被添加float属性后,在IE6显示横行margin值加倍。

解决方法:在float的标签样式控制中加入 display:inline;将其转化为行内属性。

问题2:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题描述:IE6、7和遨游里标签的高度不受控制,原因是超出自己设置的高度

解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

问题3::图片默认有间距

问题描述:因为在多个img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。

解决方法:使用float进行浮动。

问题4:Ie6下,不识别最大宽、高度和最小宽高度,意即min-width/height和 Max-width/height在ie6中没效果

问题描述:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容IE6、7和遨游里标签的高度不受控制,原因是超出自己设置的高度

解决方法:有以下两种解决方法

第一种:

 .abc{
border:1px blue solid;
width:200px;
height:200px;
} html>body .abc{
width:auto;
height:auto;
min-width:200px;
min-height:200px;
}

第二种:

 .abc{
width:200px;
height:200px;
_width:200px;
_height:200px;
}

问题5:不同浏览器默认的margin值和padding值不同

问题描述:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

解决方法:在CSS中使用通配符选择器重置样式

 *{
margin:;
padding:;
}

Web前端浏览器兼容问题的更多相关文章

  1. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  2. Web前端浏览器兼容初探

    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...

  3. [转]Web前端浏览器兼容

    转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...

  4. web前端~~浏览器兼容问题(百度)

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  5. 浅谈Web前端浏览器兼容问题

    对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...

  6. Web前端浏览器兼容性个人经验总结

    前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后 ...

  7. web前端 javascript 兼容低版本 IE 6 7 8复合写法

    1. 返回检测屏幕宽度(可视区域) function client() { if(window.innerWidth != null) // ie9 + 最新浏览器 { return { width: ...

  8. Web前端浏览器默认样式重置(CSS Tools: Reset CSS)

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...

  9. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

随机推荐

  1. Hooking Android System Calls for Pleasure and Benefit

    The Android kernel is a powerful ally to the reverse engineer. While regular Android apps are hopele ...

  2. Android布局及属性归总(查询用)

    常见布局 LinearLayout    线性布局        子元素任意,组织成一个单一的水平或垂直行,默认为水平方向TableLayout    表格布局        子元素为<Tabl ...

  3. MVC 视图-模型,动态更新

    <!DOCTYPE html> <html> <head> <title>Binding</title> <script src=&q ...

  4. Samba匿名用戶仅仅唯读访问

      NAS(Network Attached Storage),网络附加存储需要支持NFS(Network File System)和CIFS(Common Internet File Sysem)一 ...

  5. php 常用代码段

    1.写文件 $fp = fopen("jsapi_ticket.json", "w+"); fwrite($fp, $str); fclose($fp); 2. ...

  6. [ Android 五种数据存储方式之二 ] —— 文件存储数据

    关于文件存储,Activity提供了openFileOutput()方法可以用于把数据输出到文件中,具体的实现过程与在J2SE环境中保存数据到文件中是一样的. 文件可用来存放大量数据,如文本.图片.音 ...

  7. php中二维数组如何使用

    最近需要使用PHP中的二维数组,就用一个简单的例子来说明PHP中二数组是如何使用 <?php $a=array('a','b','c'); $c=array('a1','b1','c1'); $ ...

  8. Unity3D 相关技术

    slua相关shader编程相关animation相关attack check攻击检测相关

  9. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  10. Spring context:component-scan代替context:annotation-config

    Spring context:component-scan代替context:annotation-config XML: <?xml version="1.0" encod ...