浏览器兼容问题及解决方案

1.图片间隙

  A)div中的图片间隙(该bug出现在IE6以及更低版本当中)

  描述:在div中插入图片时,图片会将div下方撑大三像素

  hack1:将</div>和<img>写在一行上

  hack2:将<img>转化为块状元素,给<img>添加声明:display:block;

  B)dt,li中的图片间隙(IE6)

  hack1:将<img>转化为块状元素,给<img>添加声明:display:block;

  hack2:<img>设置对齐方式为vertical-align:top

2.双倍浮向(双倍边距)

  描述:当ie6及更低版本解决浮动元素时,会错误的把浮向边边界加倍显示

  hack:给浮动元素添加声明: display:inline

3.默认高度(IE6)

  描述:在IE6及以下版本中,部分块元素拥有默认高度(低于16px高度)

  hack1:给元素添加声明:font-size:0

  hack2:给元素添加声明:overflow:hidden;

 

4.表单元素行高不一致

  描述:表单元素行高对齐方式不一致

  hack:给表单元素添加声明:float:left或vertical-align:top

5.百分比bug

  描述:在IE6及以下版本中在解析百分比时,会按照四舍五入的方式计算从而导致50%加50%大于100%的情况

  hack:给右边的元浮动元素添加1声明:clear:right;意思:清除右浮动,clear:left;clear:both

6.透明写法

  opacity:0~1; IE8及以上浏览器

  fliter:alpha(opacity=1~100);IE9及IE9以下的浏览器

7.列表阶梯bug(IE6及更低版本的浏览器当中)

  bug1:在给的子元素中使用了Float:left;父元素没有设置浮动属性,li阶梯效果

  hack:给父元素设置浮动

  bug2:当给LI里的A转成块元素,并设置了固定高度,且给父元素写了浮动后在IE6及更低版本中会出现垂直显示

·   hack:给a也设置浮动便可解决

8.鼠标指针bug

  描述:cursor属性的head属性值只有IE浏览器能识别,其他浏览器不识别该声明,cursor属性的pointor属性值IE6.0以上版本及其他内核

      浏览器都识别该声明

  hack:如同意某元素指针鼠标形状为手型,添加声明:cursor:pointer

9.浏览器解析边框按钮时,会把边框解析在按钮内部,不会影响按钮的原有大小

10.Normalize.css

  不同浏览器的默认样式存在差距,可以使用Normalize.css抹平这些差异,当然你也肯定定制属于自己业务的reset.css

  <link href ="https://cdn.bootcss.com/noemalize/7.0.0/normalize.min.css" rel="stylesheet">

  简单粗暴法:*{margin:0;padding:0}

11.html5shiv.js

  解决ie9及以下浏览器对html5新增标签不能识别的问题

12.浏览器兼容前缀

  Opera:-o-

  IE:-ms

  Firedox:-moz-

  Chrome:-webkit-

13.a标签的几种CSS状态的顺序

  有时候我们写好a标签会发现写的样式无效,或者点击超链接后,hover,active样式没有效果,其实知识写的样式被覆盖了

  正确的a标签顺序应该是 :==love  hate   ==  爱恨

  即.link .visited    .hover      .active

14.BFC解决边距重叠问题

  .当相邻元素设置了margin边距时。margin将会取最大值,舍弃小值,为了不让边距重叠,可以给子元素加一个父元素,并设置该父元素为BFC:overflow:hidden(注意:BFC为块状格式化上下文)

15.IE6双倍边距问题

  ie6中设置浮动,同时有设置margin,会出现双倍边距的问题

  hack:display:inline

16.解决IE6不支持fixed绝对定位以及IE6以下被绝对定位的元素在滚动时会闪动的问题

  hack:html,html body{

    background-images:url(about:blank);

    background-attachment:fixed;}

    html #menu{

    position:absolute;

    top:expression((e=document.doucumentElement.scrollTop)?e.document.body.scrollTop) 100 'px')}

17.解决IE6不支持min-height兼容性写法

  min-height:350px;

  _height:350px;

 

今天早上突发奇想看了看浏览器的兼容问题,发现我竟然全忘光了,血惨,赶紧整篇博客记一下子,感觉提前步入老年痴呆生活了

    


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 8星期五:Java 8的阴暗面

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五&#xff0c;我们都会向您展示一些不错的教程风格的Java 8新功能&#…

SQL,HQL,CQL,JPQL了解

SQL&#xff08;Structured Query Language&#xff09; 是关系数据库查询语言。from后面跟的是“表名”&#xff0c;where后用“表中字段”做条件 HQL&#xff08;Hibernate Query Language&#xff09; 是面向对象的查询&#xff0c;from后面跟的是“表名”&#xff0c;where…

报错集锦

1.在node后端使用express中的multer中间件来实现文件上传时报错 node multer 报错Unexpected field 1 var expressrequire(express); 2 3 var routerexpress.Router(); 4 5 var uploadrequire(...) router.post(/upload,upload.single(fileid)); 原因&&解决&#xff…

shipyard-----------docker容器的可视化管理

shipyard是什么&#xff0c;由题目就可知&#xff0c;是一个对docker进行管理的可视化界面 照此步骤就能完成对shipyard搭建 <ip-of-host>内容要修改成你的docker0的IP地址&#xff0c;不知道的话就ifconfig就好了 如果搭建不成功则是防火墙未开放4001端口&#xff1a;su…

virtualbox怎么共享文件夹 linux,Virtualbox中Ubuntu设置共享文件夹

1、安装增强功能包(Guest Additions)VirtualBox中&#xff0c;选择”设备” -> “安装增强功能”。命令行输入&#xff1a;$ cd /media/VBoxGuestAdditions_4.3.8_RC1$ sudo ./VboxLinuxAdditions.run开始安装工具包&#xff0c;安装完毕后重启虚拟机。2、配置共享文件夹Vir…

Eclipse对Java(TM)8的官方支持

Java开发工具&#xff08;JDT&#xff09;项目的项目负责人Dani Megert今天早些时候宣布了此声明 &#xff1a; Eclipse顶级项目非常自豪地宣布正式支持Java™8。从I20140318-0830开始&#xff0c;所有的Luna&#xff08;4.4&#xff09;构建都包含Eclipse对Java™8的支持。对…

Quartz.net使用笔记

一、需求场景&#xff1a;每天固定时间执行某个行为/动作。 一开始想用定时器&#xff0c;后来无意间发现了这个插件&#xff0c;感觉功能太强大了&#xff0c;完美解决了我的问题。 二、下载地址&#xff1a;https://www.quartz-scheduler.net/ 也可以在项目中直接使用nugut进…

JS里面的懒加载(lazyload)

懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片&#xff0c;falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽&#xff0c;且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载…

远程拷贝 linux服务器,linux scp 服务器远程拷贝(示例代码)

一、将本机文件复制到远程服务器上#scp /home/administrator/news.txt [email protected]:/etc/squid/home/administrator/ 本地文件的绝对路径news.txt 要复制到服务器上的本地文件root 通过root用户登录到远程…

对偶图小结

前提 通常对偶图建立在平面图之上 平面图&#xff1a;单边除端点外无交点 解决范围 求平面图的最大流 做法 平面图显然在边的基础上分成了若干个块&#xff0c;每个块由一个结点来维护 在边缘出与源点汇点联通&#xff0c;中间处结点之间相互联通 连的边容量为该边穿过原图的边…

将Java 8支持添加到Eclipse Kepler

是否想向开普勒添加Java 8支持&#xff1f; Java 8尚未加入我们的标准下载包中 。 但是您可以将其添加到现有的Eclipse Kepler软件包中。 我有运行Java 8的三种不同的Eclipse安装&#xff1a; 面向Java开发人员的Eclipse IDE的全新Kepler SR2安装&#xff1b; 为RCP / RAP开…

CSS基础【1】:体验CSS

CSS起源 web的衰落&#xff1a;在 web 早期&#xff08;1990-1993&#xff09;,html是一个很局限的语言。几乎完全由用于描述段落&#xff0c;超链接&#xff0c;列表和标题的结构化元素组成。随着万维网的出现&#xff08;用户交互体验的加强&#xff09;&#xff0c;对 html …

JS中的兼容问题总结

今天总结总结在JS里面遇到的兼容性问题 1.获取滚动距离的兼容性问题: document.documentElement.scrollTop || document.body.scrollTop &#xff08;兼容IE&#xff09; 2.获取非行间样式 getComputedStyle(元素,false)[attr] || 元素.currentStyle[attr] 3.索引…

linux网络唤醒,如何在Ubuntu Server 18.04中启用网络唤醒(WOL)

网络唤醒(WOL)是一种行业标准协议&#xff0c;用于远程唤醒服务器。如果您管理着很多设备&#xff0c;因此不需要为了唤醒服务器而去数据中心。启用允许您远程执行此操作的功能&#xff0c;这样您可以更高效地工作。Ubuntu 系统默认没有启用WOL&#xff0c;所以我们要设置它。我…

php 分页处理

1、利用bootstrap的css框架的前提下&#xff0c;封装个Php的分页框架 命名为test.php&#xff0c;具体代码如下 1 <?php2 class Pagination3 {4 private $cfg;5 private $content ; //分页导行条内容部份6 7 public function __constr…

ActiveMQ –经纪人网络解释

目的 这个由7部分组成的博客系列将分享有关如何创建ActiveMQ代理网络以实现高可用性和可伸缩性的信息。 为什么要建立经纪人网络&#xff1f; ActiveMQ消息代理是企业中消息传递基础结构的核心组件。 它需要高度可用并且可以动态伸缩&#xff0c;以促进具有不同容量需求的动态…

13 创建高级联结

13.1 使用表别名 在之前的例子中&#xff0c;我们用的都是用的列别名&#xff0c;SQL还允许给表名起别名。 13.2 使用不同类型的联结 我们在上一章使用的只是称为内部联结或等值联结&#xff08; equijoin&#xff09; 的简单联结&#xff0c;现在来看3种其他联结&#xff0c;…

JS中undefined和null的区别,以及出现原因

区别&#xff1a;null是一个表示无的对象&#xff0c;转换为数值为0&#xff1b; undefined表示一个无的原始值&#xff0c;转化为数值为NAN&#xff08;与任何数字相加也为NAN&#xff09; undefined出现原因&#xff1a;(口诀&#xff1a;一变量二函数一对象) 1.变量被声明了…

判断一个数是不是质数

number int(input("请输入数字&#xff1a;"))count 2while count < number -1: if number % count 0: #质数是除了1和它本身能除尽。将这个数从2开始除&#xff0c;除到number-1&#xff0c;如果有除尽的就不是质数&#xff0c;如果没有就是质数。…

Java 8:功能接口示例

为了支持Java 8中的lambda表达式&#xff0c;他们引入了Functional Interfaces。 具有单一抽象方法的接口可以称为功能接口。 Runnable&#xff0c;Comparator&#xff0c;Cloneable是功能接口的一些示例。 我们可以使用Lambda表达式实现这些功能接口。 例如&#xff1a; Th…