浏览器CSS兼容性问题解决方案整理

1、CSS Hack

使用 hacker 可以把浏览器分为3类:IE6;IE7和遨游;其他(IE8 Chrome ff Safari opera等)
(1)IE6认识的 hacker 是 下划线 _ 和星号 *
(2)IE7和遨游认识的 hacker 是 星号 *
如: height:300px;*height:200px;_height:100px;
(1)IE6浏览器在读到 height:300px 的时候会认为高时 300px
继续往下读,他也认识 *heihgt , 所以当IE6读到 *height:200px 的时候会覆盖掉前一条的相冲突设置,认为高度是 200px 。
继续往下读,IE6还认识 _height ,所以他又会覆盖掉 200px 高的设置,把高度设置为 100px 。
(2)IE7和遨游也是一样的从高度 300px 的设置往下读。当它们读到 *height:200px 的时候就停下了,因为它们不认识 _height 。
所以它们会把高度解析为 200px ,剩下的浏览器只认识第一个 height:300px ;
所以他们会把高度解析为 300px 。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

2、CSS 样式兼容不同浏览器问题

所有浏览器通用: height: 100px;
IE6 专用: _height: 100px; 或者 *height: 100px;
IE7 专用: *+height: 100px;
IE7、FF 共用: height: 100px !important;
以下两种方法几乎能解决现今所有兼容:
(1) !important
随着IE7对 !important 的支持, !important 方法现在只针对IE6的兼容(注意写法,记得该声明位置需要提前)

.box {width: 100px !important; /* IE7+FF */width: 80px; /* IE6 */
}

(2)IE6/IE77对FireFox <from 针对FireFox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签,FireFox 暂不支持。而 *+html 又为 IE7特有标签。

.box { width: 120px; } /* FireFox */
*html .box { width: 80px;} /* ie6 fixed */
*+html .box { width: 60px;} /* ie7 fixed, 注意顺序 */

3、万能 float 闭合(非常重要) 可以用这个解决多个 div 对齐时的间距不对

将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class=“clearfix” 即可,屡试不爽。
代码:

<style>
/* Clear Fix */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;
}
/* End hide from IE Mac */
/* end of clearfix */
</style>

4、其他兼容技巧

Firefox下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会(可用 !important 解决)
居中问题:
垂直居中将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle ( 注意内容不要换行)
水平居中: margin: 0 auto; (当然不是万能)
若需给 a 标签内内容加上 样式,需要设置 display: block; (常见于导航标签)
Firefox 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie下 margin 加倍等问题
ul 标签在 FF 下面默认有 list-style 和 padding 最好事先声明,以避免不必要的麻烦(常见于导航标签和内容列表)
作为外部 wrapper 的 div 不要定死高度,最好还加上 overflow: hidden 以达到高度自适应

5、兼容代码:兼容最推荐的模式。

/* FF */
.submitbutton {float: left;width: 40px;height: 57px;margin-top: 24px;margin-right: 12px;
}
/* IE6 */
*html .submitbutton {margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {margin-top: 21px;
}

6、不同浏览器的标签默认margin 和 padding 不同

问题说明:随便写几个标签,不加样式控制的情况下,各自的 margin 和 padding 差异较大。
解决方案: CSS: *{margin: 0;padding:0;} 或者直接引入normalize

7、图片默认有间距

问题说明:几个 img 标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用 float 属性为 img 布局
备注:因为 img 标签是行内属性标签,所以只要不超出容器宽度, img 标签都会排在一行里,但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。

8、CSS 布局中的居中问题

问题说明: 首先在父级元素定义 text-align: center; 这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。
解决办法:在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto;

9、链接(a标签)的边框与背景

a 链接加边框和背景色,需设置 display: block; 同时设置 float: left; 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位,若不设 height, 可以在 menubar 中插入一个空格。
19、超链接访问过后 hover 样式就不出现的问题
问题说明:被点击访问过的超链接样式不在具有 hover 和 active了
解决技巧是改变CSS属性的排列顺序: L-V-H-A ;

<style type="text/css"> 
<!-- a:link {} a:visited {} a:hover {} a:active {} --> 
</style>

10、浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera-ms-transform:rotate(7deg); // IE-moz-transform:rotate(7deg); // Firefox-webkit-transform:rotate(7deg); // Chrometransform:rotate(7deg); // 统一标识语句

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

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

相关文章

LeetCode第53题:最大子数组和【python 5种算法】

作者介绍:10年大厂数据\经营分析经验,现任大厂数据部门负责人。 会一些的技术:数据分析、算法、SQL、大数据相关、python 欢迎加入社区:码上找工作 作者专栏每日更新: LeetCode解锁1000题: 打怪升级之旅 python数据分析可视化:企业实战案例 题目描述 给定一个整数数组 n…

Tomcat弱口令及war包漏洞复现(保姆级教程)

1.环境搭建 靶机&#xff1a;Ubuntu 安装参考&#xff1a;安装Ubuntu详细教程_乌班图安装教程-CSDN博客 vulhub docker搭建tomcat漏洞环境 参考&#xff1a;vulhub docker靶场搭建-CSDN博客 工具&#xff1a;burpsuite 2.漏洞复现 2.1弱口令爆破 进入http://192.168.143…

Linux Kernel入门到精通系列讲解(QEMU-虚拟化篇) 2.1 新增加一个RISC-V CPU(NARUTO-PI)

1. 概述 上一章节我们讲解了开源的QEMU 开发板怎么启动,从这章节开始,我们将会亲手去从无到有开发一个CPU,它包括CPU Core,Memory Device,Communication Controller和Device等等。 注意,本章节中调用的很多自定义宏都在include/hw/riscv/naruto.h文件,这里我就不展开说…

深入探索STM32高级定时器:TIM高级定时器的神奇应用

深入探索STM32高级定时器&#xff1a;TIM高级定时器的神奇应用 在STM32微控制器中&#xff0c;高级定时器&#xff08;TIM&#xff0c;Timer&#xff09;是一种功能强大、灵活多样的定时器模块&#xff0c;提供了更多的功能和配置选项&#xff0c;适用于各种复杂的定时和计时需…

分类神经网络2:ResNet模型复现

目录 ResNet网络架构 ResNet部分实现代码 ResNet网络架构 论文原址&#xff1a;https://arxiv.org/pdf/1512.03385.pdf 残差神经网络(ResNet)是由微软研究院的何恺明、张祥雨、任少卿、孙剑等人提出的&#xff0c;通过引入残差学习解决了深度网络训练中的退化问题&#xff…

IO实现方式(同步阻塞、同步非阻塞、IO多路复用)

1. 同步阻塞IO 同步阻塞io在数据在数据拷贝到两个阶段都是阻塞的&#xff0c;即把socket的数据拷贝到内核缓冲区和把内核缓冲区的数据拷贝到用户态到应用程序缓冲区都是阻塞的。用户线程在这个期间不能处理其他任务。 优点&#xff1a;简单易用 缺点&#xff1a;为每一次io请…

VScode远程连接虚拟机提示: 无法建立连接:XHR failed.问题解决方案

一问题描述 在vscode下载插件Remote-SSH远程连接虚拟机时提示无法建立连接 二.最大嫌疑原因&#xff1a; 我也是在网上找了许久&#xff0c;发现就是网络原因&#xff0c;具体不知&#xff0c;明明访问别的网页没问题&#xff0c;就是连不上&#xff0c;然后发现下载vscode的…

【电赛】自制模块2——偏置变幅器

一、理论基础 模电学习笔记——集成运算放大器https://mp.csdn.net/mp_blog/creation/editor/134449862 运放单双电源转换/运放单双电源供电详解https://mp.csdn.net/mp_blog/creation/editor/135884117 通过改变R4或R5的阻值改变正弦波的振幅。 根据公式 A表示放大倍数。 …

MAC上如何将某个目录制作成iso格式磁盘文件,iso文件本质是什么?以及挂载到ParallelDesktop中?(hdiutil makehybrid )

背景 ParallelsDesktop没有安装ParallelsTools的无法共享目录&#xff0c;可以通过ParallelsDesktop提供CD磁盘的方式共享进去 命令 # 准备文档 mkdir mytestdir cp xxx mytestdir# 生成iso hdiutil makehybrid -o output.iso mytestdir -iso -joliethdiutil是MAC提供的磁盘…

大白话!go语言中的指针、指针类型的方法接收器

go语言中的指针使用起来的比较简单。应用如下&#xff1a; 1.普通的对象取地址&#xff0c;获取对象值 符号&&#xff0c;取地址符&#xff0c;可以取变量的地址&#xff0c;或结构体对象的地址等。符号*&#xff0c;是从地址中取值&#xff08;根据栈中存储地址&#xf…

Oracle中的视图

1- 什么是视图 视图是一个虚拟表 视图是由sql查询语句产生的 视图真实存在 但是不存储数据 视图中的数据 只是对 基表(源数据表) 中的数据的引用 总的来说 视图可以简化数据 用户&#xff0c;订单&#xff0c;物流 三个表进行关联 吧很复杂的sql查询语句存储成一个视图 …

【数据仓库工具箱】DW/BI系统的核心元素和基本要求

核心元素 DW/BI 环境划分为4个不同的&#xff0c;各具特色的组成部分。分别是&#xff1a;操作型源数据&#xff0c;ETL系统&#xff0c;数据展现和商业智能应用。 操作型源数据 记录的是操作型系统&#xff0c;用于获取业务事务。源数据关注的是处理性能和可用性。源系统一般…

Jmeter-非GUI模式下运行jmeter脚本-适用于服务器上持续集成测试

背景 大部分Jmeter脚本都是部署在Linux上运行&#xff0c;利用Jenkins做接口自动化&#xff0c;定时巡检任务。 执行命令 1.进入jmeter的目录&#xff0c;bin文件夹 cd C:\path\to\jmeter\bin2.运行脚本文件 jmeter -n -t D:\{脚本文件目录}\xxx.jmx -l D:\{脚本文件目录}…

信息系统项目管理师0061:架构设计(5信息系统工程—5.1软件工程—5.1.1架构设计)

第五章 信息系统工程 信息系统工程是用系统工程的原理、方法来指导信息系统建设与管理的一门工程技术学科,它是信息科学、管理科学、系统科学、计算机科学与通信技术相结合的综合性、交叉性、具有独特风格的应用学科。当前信息系统工程的主要任务是研究信息处理过程内在的规律…

76.最小覆盖子串

题目描述 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 。注意&#xff1a;对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数量必须不少于 t 中该字符数…

计算机视觉中,什么是上游任务、下游任务和pretext task?

在机器学习和深度学习的语境中&#xff0c;尤其是当涉及到预训练模型时&#xff0c;我们经常听到“上游任务”和“下游任务”这两个术语。 上游任务通常指的是模型在大量无标签或有标签的数据上进行预训练的任务&#xff0c;其目标是让模型学习到数据的内在规律和特征表示。 …

Java中的BIO、NIO与AIO

1.概述 I/O 模型简单的理解&#xff1a;就是用什么样的通道进行数据的发送和接收&#xff0c;很大程度上决定了程序通信的性能。Java 共支持 3 种网络编程模型 I/O 模式&#xff1a;BIO、NIO、AIO。 2.Java BIO Java BIO(Blocking I/O)&#xff1a;是传统的java io 编程&#…

密钥密码学(二)

原文&#xff1a;annas-archive.org/md5/b5abcf9a07e32fc6f42b907f001224a1 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十章&#xff1a;可变长度分数化 本章涵盖 基于摩尔斯电码的密码 混合字母和双字母 可变长度二进制码字 基于文本压缩的密码 本章涵盖…

【Redis(8)】Spring Boot整合Redis和Guava,解决缓存穿透、缓存击穿、缓存雪崩等缓存问题

在缓存技术的挑战及设计方案我们介绍了使用缓存技术可能会遇到的一些问题&#xff0c;那么如何解决这些问题呢&#xff1f; 在构建缓存系统时&#xff0c;Spring Boot和Redis的结合提供了强大的支持&#xff0c;而Guava的LoadingCache则为缓存管理带来了便捷的解决方案。下面我…

【嵌入式】keil5安装(同时兼容C51和STM32)

最近在开发STM32的时候&#xff0c;安装Keil5&#xff0c;遇到STM32和C51的共存的问题&#xff0c;在网上找了很多方法&#xff0c;又遇到一些bug&#xff0c;最终还是弄好了。因此将处理的过程记录下来&#xff0c;希望对遇到相同问题的朋友一些启发。 1、下载安装包 Keil P…