CSS兼容常用技巧论述(整理)-FreeNAS中文网

admin 管理员组

文章数量: 887021

2024年2月23日发(作者：北京it培训web前端)

CSS兼容常用技巧

请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处置，作为W3C的尺度，必然要加 DOCTYPE声明。

v的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。错误谬误是要控制内容不要换行

2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

<#div id=〞imfloat〞>

相应的css为

#imfloat{

float:left;

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

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

3.浮动ie发生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会发生200px的距离

display:inline; //使浮动忽略}

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不成控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行摆列的效果

diplay:table;

4 IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面底子等于没有设置宽度和高度。

比方要设置布景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px;

min-height: 35px;}

5.页面的最小宽度

min-width是个非常便利的CSS命令，它可以指定元素最小也不克不及小于某个宽度，这样就能包管排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个＜div> 放到＜body> 标签下，然后为div指定一个类,然后CSS这样设计：

#container{ min-width: 600px; width:exPRession(Width ＜ 600 "600px":

"auto" );}

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

V浮动IE文本发生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

＜/div>

o /

E捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决方法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面布局尽量简单。

t的div闭合;去除浮动;自适应高度

①例如：＜#div id=〞floatA〞 >＜#div id=〞floatB〞 >＜#div id=〞NOTfloatC〞 >这里的NOTfloatC并不但愿继续平移，而是但愿往下排。(此中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必需将float标签闭合。在＜#div class=〞floatB〞> ＜#div class=〞NOTfloatC〞>之间加上＜#div class=〞clear〞>这个div必然要注意位置，而且必需与两个具有float属性的div同级，之间不克不及存在嵌套关系，否那么会发生异常。而且将clear这种样式定义为为如下即可： .clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的布景,譬如:

＜/div>

比方我们要将page的布景设置成蓝色,以达到所有三栏的布景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保留高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不克不及设置成 float,所以我们应该这样解决

＜/div>

再嵌入一个float left而宽度是100%的DIV解决之道。

④万能float 闭合(非常重要!)

关于 clear float 的道理可拜见 [How To Clear Floats Without Structural Markup],将以下代码参加Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

/* 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 */

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

9．高度不克不及自适应

高度不克不及自适应是当内层对象的高度发生变化时外层高度不克不及自动进行调节，出格是当内层对象使用margin 或paddign 时。

例：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容＜/p>

解决技巧：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

10 .IE6下为什么图片下有空隙发生

解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top

bottom middle text-bottom 都可以解决.

11.如何对齐文本与文本输入框

加上 vertical-align:middle;

b尺度中定义id与class有什么区别吗

(1).web尺度中是不容许重复ID的,比方 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要屡次引用的定义便可以使用他.

(2).属性的优先级问题

ID 的优先级要高于class,看上面的例子

(3).便利JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否那么只能操纵遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单。

13. LI中内容超过长度后以省略号显示的技巧

此技巧适用与IE与OP浏览器

14.为什么web尺度中IE无法设置滚动条颜色了

解决方法是将body换成html

Firefox与IE的CSS兼容技巧

1. Div居中问题

div设置 margin-left, margin-right 为 auto 时已经居中，IE 不可，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

2.链接(a标签)的边框与布景

a链接加边框和布景色，需设置 display: block, 同时设置 float: left 包管不换行。参照

menubar, 给 a 和 menubar 设置高度是为了防止底边显示错位, 假设不设 height, 可以在 menubar

中插入一个空格。

3.超链接拜候过后hover样式就不呈现的问题

被点击拜候过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的摆列挨次: L-V-H-A

Code:

4. 游标手指cursor

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

L的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义

ul{margin:0;padding:0;}就能解决大局部问题

6. FORM标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin那么是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

7. BOX模型解释不一致问题

在FF和IE中的BOX模型解释不一致导致相差2px解决技巧：div{margin:30px!important;margin:28px;} 注意这两个margin的挨次必然不克不及写反，

important这个属性IE不克不及识别，但此外浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不成以只写margin:xx px!important;#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8.属性选择器(这个不克不及算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和Opera作用.属性选择器和子选择器还是有区此外,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段 - !important

如果实在没有方法解决一些细节问题,可以用这个技巧.FF对于〞!important〞会自动优先解析,然而IE那么会忽略.如下

.tabd1{

background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/

background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */}

值得注意的是，必然要将xxxx !important 这句放置在另一句之上。

,FF的默认值问题

或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂阿谁可恶的M$ IE.其实对于css的尺度撑持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样罢了，掌握了这个技巧，你会发现写出兼容FF和

IE的css并不是那么困难，或许对于简单的css，你完全可以不消〞!important〞这个东西了。

我们都知道，浏览器在显示网页的时候，城市按照网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的布景，如果在css中没有被指定，浏览器那么将其设置为白色或者透明，等等其他不决义的样式均如此。所以有很多东西呈现 FF和IE显示不一样的底子原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的尺度来进行规定，因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度

尺度浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？方法就是去掉height设置min- height:200px; 这里为了赐顾帮衬不认识min-height的IE6 可以这样定义:

{

height:auto!important;

height:200px;

min-height:200px;

}

ox下如何使持续长字段自动换行

众所周知IE中直接使用 Word-wrap:break-word 就可以了, FF中我们使用JS插入

的技巧来解决

aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

function toBreakWord(el, intLen){

var ōbj=mentById(el);

var strContent=TML;

var strTemp="";

while(>intLen){

strTemp+=r(0,intLen)+"

strContent=(intLen,);

}

strTemp+="

"+strContent;

TML=strTemp;

}

if(mentById && !) toBreakWord("ff", 37);

/* ]]> */

13.为什么IE6下容器的宽度和FF解释不同？

问题的差别在于容器的整体宽度有没有将边框〔border〕的宽度算在其内,这里IE6解释为200PX ,而FF那么解释为220PX,那究竟是怎么导致的问题呢？大师把容器顶部的xml去掉就会发现本来问题出在这,顶部的申明触发了IE的qurks mode。

< xml version="1.0" encoding="gb2312" >

让FireFox与IE兼容＜/div>

IE7.0对CSS的撑持又有新问题，解决如下。

第一种，CSS HACK

Bpx; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

注意挨次。

下面这样也属于CSS HACK，不外没有上面这样简洁。

#example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

第二种，是使用IE专用的条件注释

第三种，css filter的方法，以下是从国外网站翻译过来的。

新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式：

some text here＜/div>

在body表示这里参加lang属性,中文为zh：

此刻对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

这样做是为了用!important覆盖本来的css样式,由于:lang选择器ie7.0并不撑持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不撑持此属性,所以需要参加以下css样式：

#item:empty {

background: green !important

}

:empty选择器为css3的尺度,尽管safari并不撑持此尺度,但是还是会选择此元素,不管是否此元素存在,此刻绿色会此刻在除ie各版本以外的浏览器上。

对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。

该文章转载自无忧考网：

内容总结

〔1〕CSS兼容常用技巧

请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处置，作为W3C的尺度，必然要加 DOCTYPE声明

〔2〕//for ff+ie6.0 width /**/:500px

本文标签：元素高度问题显示

版权声明：本文标题：CSS兼容常用技巧论述(整理) 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1708638962h528453.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

发表评论

全部评论 0

暂无评论

技术交流 – FreeNAS中文网

CSS兼容常用技巧论述(整理)

更多相关文章

LTE网络性能优化简述

5G优化案例:5G SA接入问题定位总结

中兴VoLTE优化经验的总结及案例

路虎消息中心显示中英文对照

如何设置火狐浏览器

采购项目需求及技术要求

电脑硬盘常见的问题是什么?硬盘一般坏在哪里?

硬盘嘎嘎响可以修复吗

MegaRAID Storage Manager操作手册V1.1

ESX的一些配置命令

快速解决电脑无法识别外部硬盘的常见故障

电脑无法识别外部硬盘怎么处理

无线网络连接未启用DHCP怎么回事

巧用手机管理和监控ESXi主机

2018年上半年网络工程师考试下午真题(完整版)

自注意力机制特征提取python

SSH远程登录linux虚拟机

linux中df命令的作用

如何解决电脑出现无法识别硬盘的问题

计算机病毒防范毕业论文开题报告

发表评论

推荐文章

(mysql版)德鲁伊连接池的配置方法

在hadoop中搭建zookeeper集群

迪克和简：绝地大师

电商为何要做CRM？

windows默认编码格式修改

热门文章

HP惠普光影精灵78锐龙版Victus by HP Laptop 16-e0xxx,16-e1xxx原装出厂Windows11系统恢复镜像下载

PowerMock 精萃

【面试题】【常识】100问

解决 Ubuntu 连接不上外网，无法ping主机地址。

Windows用启动盘安装Ubuntu双系统

保姆级教程：EasyRecovery数据恢复软件的的使用

windows下安装jupyter

Windows Server 2012 磁盘管理

笔记本电脑系统优选：专为各大品牌定制的装机版系统推荐

pd17虚拟机安装包：Parallels Desktop 17 激活版

最新文章

Raid技术

LSI_阵列卡操作手册

破解Centos7_root用户密码

Redhat重置Root用户密码方法

远程批量修改linux服务器密码的脚本

Windows7 系统安全设置权限技巧

（Windows系统）详细介绍Windows系统 含有英文版

最新Windows 11教育版下载：专为教育设计的系统！

Win7系统下搭建NFS服务器

零基础使用UltraISO制作并安装纯净Win10系统指南

（Windows系统）详细介绍Windows系统含有英文版