常见浏览器兼容性问题与解决方案?

(1)浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:CSS里 *{margin:0;padding:0;}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

(2)浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

(3)浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度 
问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
碰到频率:60%
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

(4)浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug 
问题症状:IE6里的间距比超过设置的间距
碰到几率:20%
解决方案 : 在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

(5) 浏览器兼容问题五:图片默认有间距 
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
碰到几率:20%
解决方案:使用float属性为img布局
备注 : 因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

(6) 浏览器兼容问题六:标签最低高度设置min-height不兼容 
问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
碰到几率:5%
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

(7)浏览器兼容问题七:透明度的兼容CSS设置 
一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度,而在firefox中,一般就是直接使用opacity:0,对于兼容的,一般的做法就是在书写css样式的将2个都写上就行,就能实现兼容

 

参考:https://www.nowcoder.com/ta/review-frontend/review?page=47

转载于:https://www.cnblogs.com/guorange/p/7202340.html

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

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

相关文章

C#反射,性能优化,不止于优化

“ 架构师的价值,在于独立且理性的思考”想要写出灵活而且具有更好适应性的代码,反射是首选方案。反射赋予程序在运行时动态创建实例的能力,可以在程序运行时(而非编译时)获取实例类型,获取元数据信息&…

设计模式C++实现--Observer模式

2019独角兽企业重金招聘Python工程师标准>>> 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。…

Liunx 安装mysql 5.6.16

2019独角兽企业重金招聘Python工程师标准>>> 1.卸载原有的mysql 1)先查看原有的mysql rpm -qa|grep -i mysql 2)删除 mysql rpm -e --nodeps 包名 3)删除老版本 mysql的开发头文件和库 rm -fr /usr/lib/mysql rm -fr /usr/include/mysql 注意:卸载后/va…

java有效索引范围_Java索引超出范围:0

我拼命试图找出一种方法来阻止“字符串索引超出范围:0”错误……只要我不输入任何内容然后继续执行,就会发生这种情况:static String getRef(Scanner Keyboard){Scanner keyboard new Scanner(System.in);String ref "";boolean valid false…

UESTC 电子科大专题训练 DP-N

题意:有n个人写m行代码,第i个人写一行代码会产生ai个bug,问bug小于b的方案数 思路:背包二维费用 AC代码: #include "iostream" #include "string.h" #include "stack" #include "q…

HashMap与HashTable的区别

HashMap和HashSet的区别是Java面试中最常被问到的问题。如果没有涉及到Collection框架以及多线程的面试,可以说是不完整。而Collection框架的问题不涉及到HashSet和HashMap,也可以说是不完整。HashMap和HashSet都是collection框架的一部分,它…

数据挖掘 pandas基础入门之操作

为什么80%的码农都做不了架构师?>>> 统计 import pandas import numpy# 通过传递一个 numpyarray,时间索引以及列标签来创建一个DataFrame: dates pandas.date_range("20180509", periods6) df pandas.DataFrame(num…

C# Task.Delay()和Thread.Sleep()有什么区别?

很多时候我们需要做一段延时处理,就直接Thread.Sleep(n)处理了,但实际上延时也可以用Task.Delay(n),那二者之间有没有区别呢?我们先来看一个案例:using System; using System.Threading; using System.Threading.Tasks…

java queue源码_java源码解读--queue

queue接口特点:可以模拟队列行为,即“先进先出”。接口结构queue接口继承了Collection接口,并增加了一些新方法12345678910111213141516public interface extends Collection{boolean add(E e);//将元素插入队列,如果失败返回fals…

旧题新做:从idy的视角看数据结构

“今天你不写总结……!!!” 额…… 还是讲我的吧。这些考试都是idy出的题。 20170121:DFS序、 ST表、线段树练习 这是第一次考数据结构。 Problem 1. setsum 1 second    给你一个长度为N 的整数序列,支持两种操作…

常用的 Java 工具类之 Apache 全家桶使用

平常我们在日常的开发中会一些通用的功能封装成一些工具类,以便之后复用。但是有些常用功能,业界已经存在,我们无需造轮子,只需直接使用或借用它们的 Api ,构建我们的自己项目中工具类。这篇首先介绍平常用到的 Apache…

.NET MAUI实战 MessagingCenter

1.概要在.NET MAUI提供了消息机制,该机制为订阅/发布模式。发布-订阅模式是一种消息传递模式,在此模式下,发布者可在无需知道任何接收方(称为订阅方)的情况下发送消息。同样,订阅方可在不了解任何发布方的情…

elasticsearch 5.1 问题 ubuntu

1、can not run elasticsearch as root 切换到非root用户 2、main ERROR Could not register mbeans java.security.AccessControlException: access denied ("javax.management.MBeanTrustPermission" "register") 改变elasticsearch文件夹所有者到当前用…

洛谷——P1033 自由落体

https://www.luogu.org/problem/show?pid1033#sub 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,….n-1。在地面上有一个小车(长为 L,高为 K,距…

java 接口防刷_java轻量级接口限流/防刷插件

简介call-limit提供接口限流、防刷的功能,插件基于spring开发,在应用应用的任何一个逻辑层皆可使用(web、service、dao),插件支持单机应用下的限流和分布式应用的限流(分布式应用限流需要依赖redis),在简单业务场景下插件可为大家…

【leetcode】521. Longest Uncommon Subsequence I

题目如下: 解题思路:本题有点意思。首先如果输入的两个字符串都为空,那么结果是-1;如果两个字符串长度不一样,那么结果是较长的字符串的长度,因为较长的字符串肯定是自身的子序列,但一定不是较短…

【问题】为什么 System.Timers.Timer 更改间隔时间后的第一次触发时间是设定时间的三倍?...

【问题】为什么 System.Timers.Timer 更改间隔时间后的第一次触发时间是设定时间的三倍?独立观察员 2022 年 9 月 4 日在编写 “Wifi 固定器 [1]” 程序时,按如下方式使用了定时器:// 声明; private Timer _Timer new Timer() { …

JS魔法堂:判断节点位置关系

一、前言                           在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅。 二…

ChartCtrl源码剖析之——CChartAxis类

CChartAxis类用来绘制波形控件的坐标轴,这个源码相对较复杂,当初阅读的时候耗费了不少精力来理解源码中的一些实现细节。 CChartAxis类的头文件。 #if !defined(AFX_CHARTAXIS_H__063D695C_43CF_4A46_8AA0_C7E00268E0D3__INCLUDED_) #define AFX_CHARTA…

java如何输出线程的标识符_Java多线程面试题

1、在Java中什么是进程,什么是线程进程:进程是程序执行的一个实例,进程是线程的容器。程序是指令、数据及其组织形式的描述,进程是程序的实体。线程:有时被称为轻量级进程(Lightweight Process,LWP)&#x…