html浏览器的区别是什么意思,不同浏览器对css的识别有区别吗?

不同浏览器对css的识别是有区别,因此针对不同的浏览器去写不同的CSS。下面本篇文章给大家介绍一些常用CSS书写技巧(不同浏览器之间的差异)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

f42891c838ada1705532ea931b8d406d.png

不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法

1:!important

!important作用是提高指定样式规则的应用优先权。

IE7以及所有标准浏览器能识别!important

区别IE6与IE7与其他浏览器.browserTest

{

border:20px solid #60A179 !important;

border:20px solid #00F;

}

在Mozilla中或者IE7浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:

在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:

2:*

IE都能识别*;标准浏览器(如火狐)不能识别*

区别IE6与火狐.browserTest

{

border:20px solid #60A179;

*border:20px solid #00F;

}

区别IE7与火狐.browserTest

{

border:20px solid #60A179;

*border:20px solid #00F;

}

区别IE7,IE6与火狐

.browserTest

{

border:20px solid #60A179;

*border:20px solid #00F !important;

*border:20px solid ###;

}

3:_

IE6支持下划线,IE7和firefox均不支持下划线

区别IE7,IE6与火狐.browserTest

{

border:20px solid #60A179;

*border:20px solid #00F;

_border:20px solid ###;

}

/*不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面*/

4:*+html 与 *html

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.browserTest { width: 120px; } /* FireFox fixed */

*html .browserTest { width: 80px;} /* ie6 fixed */

*+html .browserTest { width: 60px;} /* ie7 fixed */

注意:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明:

/*****************************************************************************/

/*****************************************************************************/

以下是一些常用的CSS兼容技巧

1)火狐下给div设置padding后会导致width和height 增加, 但IE不会.(可用!important解决)

2)垂直居中,将 line-height设置为当前div相同的高度, 再通过vertical-align: middle;( 注意内容不要换行)

3)水平居中,margin:0 auto;(当然不是万能)

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

5)浮动IE产生的双倍距离

在IE下,当一个div设置了float后,然后给他设置margin,就会出现加倍的margin,解决的办法是给div设置display:inline。

相应的css为#float

{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

}

Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

6)IE和FF对盒模型的解释区别#browserTest{ width: 650px !important;width: 648px;padding-left:2px;background:#fff; }

browserTest显示的宽度是650px;

IE Box的总宽度是:width+padding+border+margin宽度总和;

FF Box的总宽度就是:width的宽度,padding+border+margin的宽度在含在width内。

如果有BOX{WIDTH:"300"; PADDING:"5PX";}

则BOX在IE的宽度应该为:310

而在FF的宽度则是300

所以在BOX有填充的情况下应该这样使用BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}

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

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

9)页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

放到 标签下,然后为div指定一个类:

然后CSS这样设计:#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

10:万能float闭合

将以下代码加入Global CSS 中,给需要闭合的div加上

.clearfix:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

*html .clearfix{

height:1%;

}

*+html .clearfix{

height:1%;

}

.clearfix

{

display:inline-block;

}

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

/**********************************************/

Float left

Float right

#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}

.column_left{ float:left; width:20%; padding:10px;}

.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

更多web前端开发知识,请查阅 HTML中文网 !!

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

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

相关文章

面试之 Python 进阶

前端相关 1.谈谈你对http协议的认识。 浏览器本质&#xff0c;socket客户端遵循Http协议   HTTP协议本质&#xff1a;通过\r\n分割的规范 请求响应之后断开链接 > 无状态、 短连接 具体&#xff1a;   Http协议是建立在tcp之上的&#xff0c;是一种规范&#xff0c;它…

Lync Server外部访问系列PART5:模拟公网DNS

因为要实现外部用户访问&#xff0c;所以我们必然需要在公网DNS中添加我们所需要的一些A记录&#xff0c;而这样的测试需要我们拥有一个公网的域名以及一个可发布、可访问的IP。如果没有的话就没办法这样测试&#xff0c;所以我们今天在物理局域网中搭建一台DNS服务器&#xff…

oracle对查询结果求和_Oracle 闪回技术详解

概述闪回技术是Oracle强大数据库备份恢复机制的一部分&#xff0c;在数据库发生逻辑错误的时候&#xff0c;闪回技术能提供快速且最小损失的恢复(多数闪回功能都能在数据库联机状态下完成)。需要注意的是&#xff0c;闪回技术旨在快速恢复逻辑错误&#xff0c;对于物理损坏或是…

html里写js ajax吗,js、ajax、jquery的区别是什么?

js、ajax、jquery的区别1、JS是一门前端语言。2、Ajax是一门技术&#xff0c;它提供了异步更新的机制&#xff0c;使用客户端与服务器间交换数据而非整个页面文档&#xff0c;实现页面的局部更新。3、jQuery是一个框架&#xff0c;它对JS进行了封装&#xff0c;使其更方便使用。…

泰安第一中学2021年高考成绩查询,等级考第一天结束 泰安部分考生已完成2021年高考...

6 月 9 日&#xff0c;山东新高考进入第三天&#xff0c;也是学业水平等级考试的第一天&#xff0c;物理、思想政治、化学三门选考科目的考试已全部完成。由于选考科目不同&#xff0c;考生结束高考的进程也不同&#xff0c;9 日下午&#xff0c;选考物理、思想政治、化学的考生…

机器学习原理与算法(六) 支持向量机

版权声明&#xff1a;本系列文章为博主原创文章&#xff0c;转载请注明出处&#xff01;谢谢&#xff01; 本章索引&#xff1a; 从第3章的Logistic回归算法开始&#xff0c;我们一直在讨论分类问题。在各种不同的分类算法中&#xff0c;...&#xff0c;我们一直在讨论如何分类…

读《程序员的SQL金典》[2]--函数

一、数学函数 1.RAND SELECT RAND () ---0.302870228294199取0-1之间的随机小数。 2.小数取整 CEILINT(data)舍掉小数部分并向上取整。FLOOR(data)舍掉小数部分并向下取整。SELECT TOP 3 FWeight, CEILING(FWeight ),FLOOR( FWeight) FROM T_PersonRound(m,d)&#xff1a;四舍…

python人脸识别代码百度ai_python百度AI人脸识别API测试

1、注册账号 2、创建应用 3、得到AK和SK 4、用AK SK获取access_token 可用下面的代码&#xff1a; #!/usr/bin/python3.5 # encoding:utf-8 import requests # client_id 你的AK client_secret 你的SK host https://aip.baidubce.com/oauth/2.0/token?grant_typeclient_crede…

Flask 第三方组件之 SQLAlchemy

一、介绍 SQLAlchemy是一个基于Python实现的ORM框架。该框架建立在 DB API之上&#xff0c;使用关系对象映射进行数据库操作&#xff0c;简言之便是&#xff1a;将类和对象转换成SQL&#xff0c;然后使用数据API执行SQL并获取执行结果。 安装&#xff1a;pip3 install sqlalc…

html 中怎样显示enum,JavaScript如何枚举?

JavaScript中对象的属性分为两种&#xff1a;数据属性和访问器属性。然后根据具体的上下文环境的不同&#xff0c;又可以将属性分为&#xff1a;原型属性和实例属性。原型属性是定义在对象的原型(prototype)中的属性&#xff0c;而实例属性一方面来自构造的函数中&#xff0c;然…

iperf测试网卡性能

Iperf是一个网络性能测试工具。可以测试TCP和UDP带宽质量&#xff0c;可以测量最大TCP带宽&#xff0c;具有多种参数和UDP特性&#xff0c;可以报告带宽&#xff0c;延迟抖动和数据包丢失 因为产品上确定要要用的&#xff30;&#xff28;&#xff39;是千&#xff2d;的&a…

acrobat 控件可以发布吗_短视频可以同时在多个平台发布吗?

我们在做自媒体内容创业中&#xff0c;很多人都在做视频版块&#xff0c;那么一个短视频到底能不能多平台同时发布呢&#xff1f;那么今天&#xff0c;我来分享给大家&#xff0c;希望能够帮到你解决困惑。1.作品可以多平台分发&#xff1a;大家不确定是否能多平台分发&#xf…

CentOS四种方法自建yum仓库

将ISO光盘镜像作为yum本地仓库&#xff08;适用于不能联外网的环境&#xff09;&#xff1a; 1、 禁用所有可用的yum仓库&#xff0c;为方便演示&#xff0c;直接全部删除&#xff1a; # cd /etc/yum.repos.d # ls # rm -rf * 2、 创建光盘挂载点&#xff0c;挂载光盘&#x…

python substr_python数据分析-数据对象(一)

Python基本数据类型一般分为&#xff1a;数字、字符串、列表、元组、字典、集合这六种基本数据类型。不可变&#xff08;3 个&#xff09;&#xff1a;Number&#xff08;数字&#xff09;、String&#xff08;字符串&#xff09;、Tuple&#xff08;元组&#xff09;&#xff…

html表格里的超链接点不了,Excel如何添加和取消超链接 Excel超链接打不开是怎么回事...

很多用户在制作excel表格的时候都会添加一些超链接&#xff0c;在制作完成后发布到网页&#xff0c;阅读者可以通过超链接打开指引的网页或者文件&#xff0c;超链接对制作excel表格的用户有非常大的帮助&#xff0c;虽然添加超链接的步骤非常简单&#xff0c;不过还是有些exce…

yum 安装apache php mysql

安装&#xff1a; yum install -y httpd php 查看版本&#xff1a;、 rpm -qa httpd php httpd-2.2.15-54.el6.centos.x86_64 php-5.3.3-48.el6_8.x86_64 修改apache配置文件&#xff1a; vim /etc/httpd/conf/httpd.conf 在#ServerName www.example.com:80行下添加一行 Server…

Python 散点图线性拟合_机器学习之利用Python进行简单线性回归分析

前言&#xff1a;在利用机器学习方法进行数据分析时经常要了解变量的相关性&#xff0c;有时还需要对变量进行回归分析。本文首先对人工智能/机器学习/深度学习、相关分析/因果分析/回归分析等易混淆的概念进行区分&#xff0c;最后结合案例介绍如何利用Python进行简单线性回归…

Flask 第三方组件之 Migrate

flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的.类似于Django的python manage.py migrate 官方文档: http://flask-migrate.readthedocs.io/en/latest/ 安装 pip install flask-migrate 使用举例 from flask import Flask from flask_sqlalchemy import SQLA…

html section 布局,section标签的用法

标签的用法由于昨晚发了一篇文章http://www.zcool.com.cn/article/ZMzA3MzI.html&#xff0c;有一个网友评论问 的用法。所以现在举例来说明一下&#xff1a;html5引入了标签&#xff0c;用于描述文档的结构&#xff0c;它同标签的意思一样。但是在特定环境中&#xff0c;两者又…

清北学堂Day4

&#xff08;1&#xff09;第一题 财富(treasure) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有n个小伙伴。每个小伙伴有一个身高hi。 这个游戏是这样的&#xff0c;LYK生活的环境是以身高为美的环境&#xff0c;因此在这里的每个人都羡慕比自己身高高的人&#xff…