html%3cp%3e超出div,div+css使用兼容问题_1746

最新推荐文章于 2022-02-10 11:58:20 发布

张再冉

最新推荐文章于 2022-02-10 11:58:20 发布

阅读量623

点赞数

文章标签： html%3cp%3e超出div

div+css使用兼容问题_1746

(2010-06-19 12:44:28)

标签：

杂谈

div+css使用兼容问题

!important标志完成Firefox和IE6处置padding尺寸上的兼容

[示例代码]

在Firefox中，div的完全宽度是padding+width，因而width: 300px; padding:

10px;的实践宽度是320px;而在IE6中，div的完全宽度是width，所以这个div和下里的div宽度分歧。

宽度为300px的div

通功借帮!important标志，可以设置Firefox中的width值为IE6中的width值减来padding值，这样就真隐了Firefox与IE6的padding后果尺寸兼容。

[div+css要害词]

div css

[div+css主要农具]

Internet Explorer Developer Toolbar,

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

[div+css的罕见问题]

较验div+css格局，http://validator.w3.org/

div+css的margin缩写方法

div+css的padding缩写方法

链交的:link,:visited,:hover,:active四类状况

[div+css的阅读器兼容答题]

程度居中，Firefox使用margin-left: auto; margin-right: auto; IE6

使用text-align: center;

垂直居中，Firefox中使用display: table-cell; vertical-align:

middle;能够真隐div垂直居中，而IE6中则须要借帮IE6中css的特色完成垂直居中。

!important标忘，Firefox支持!important标忘，IE6忽详!important标志，!important需求搁在前面能力止作用

手形鼠标指针，使用cursor: pointer;

padding的尺寸，在Firefox中padding是盘算在width之外的,400电话，而IE6是盘算在width之内的

白章出处：DIY部降(http://www.diybl.com/course/1_web/css/cssjs/2007104/76448.html)

*+html 取 *html 是IE特有的标签, firefox 暂没有支撑.而*+html 又为

IE7特有标签。所以要解决padding的兼容答题便要靠前里降到的本签。

以sccas-site为例，右侧导航栏在padding上发生了ie6、ie7以及ff阅读器不兼容，改动代码如下：

#menu7 li a {

height:25px;

text-decoration: none;

margin:0px 0px 0px -40px

!important;(firefox可辨认，可使导航栏整体地位取ie中雷同)

margin:0px 0px 0px 0px;

}

#menu7 li a:link{

float:none;

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 20px;

}

*html #menu7 li a:link{

float:none;

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 10px;

}

*+html #menu7 li a:link{

float:none;

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 60px;

}

#menu7 li a:visited {

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 20px;

}

*html #menu7 li a:visited {

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 10px;

}

*+html #menu7 li a:visited {

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 60px;

}

#menu7 li a:hover{

color:#FF0000;

background-color:#E6E6E6;

font-weight:bold;

border-top:1px solid #fff;

padding: 8px 0 0 20px;

}

*html #menu7 li a:hover{

color:#FF0000;

background-color:#E6E6E6;

font-weight:bold;

border-top:1px solid #fff;

padding: 8px 0 0 10px;

}

*+html #menu7 li a:hover{

color:#FF0000;

background-color:#E6E6E6;

font-weight:bold;

border-top:1px solid #fff;

padding: 8px 0 0 60px;

}

注意，假如少个css属性并列，则须要分离加上辨认标签。如下：

#menuleft li a:link,#menuleft li a:visited {

float: none;

text-align: left;

color: #000;

background: url(../images/arrow3.gif) no-repeat 90% 50%;

background-color:#CFF3F6;

padding-top: 8px;

padding-left: 20px;

}

*html #menuleft li a:link, *html #menuleft li a:visited {

float: none;

text-align: left;

color: #000;

background: url(../images/arrow3.gif) no-repeat 90% 50%;

background-color:#CFF3F6;

padding-top: 8px;

padding-left: 10px;

}

*+html #menuleft li a:link, *+html #menuleft li a:visited {

float: none;

text-align: left;

color: #000;

background: url(../images/arrow3.gif) no-repeat 90% 50%;

background-color:#CFF3F6;

padding-top: 8px;

padding-left: 50px;

}

注意：在属性内部加*、*+不止作用。如下是过错的：

#menu7 li a:visited {

color: #000;

display: block;

font-weight:bold;

background-color:#CCCCCC;

border-top:1px solid #fff;

padding: 8px 0 0 20px;

*padding:8px 0 0 10px;

*+padding:8px 0 0 60px;

}

下面是抄过去的一些技能：

一、CSS HACK

以下两种方式简直能解决现今一切HACK.

1, !important

跟着IE7对!important的支持, !important

办法现在只针对IE6的HACK.(注意写法.忘得当声亮地位需要提早.)

#wrapper

{

width: 100px!important;

width: 80px;

}

2, IE6/IE7对FireFox

*+html 取 *html 是IE特有的标签, firefox 暂不支撑.而*+html 又为 IE7特有本签.

#wrapper

{

#wrapper { width: 120px; }

*html #wrapper { width: 80px;}

*+html #wrapper { width: 60px;}

}

注意:*+html 对于IE7的HACK 必需保证HTML底部有如下声亮：

/p>

HTML 4.01

Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

两、万能 float 闭合(十分主要!)

闭于 clear float 的本理可参睹 [How To Clear Floats Without Structural

Markup]

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

class="clearfix" 便可,屡试不爽.

.clearfix:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix

{

display:inline-block;

}

.clearfix {display:block;}

三、其他兼容技能(再次�嗦)

1, FF下给 div 设放 padding 后会招致 width 和 height 增添,

但IE没有会.(可用!important解决)

2, 居中问题.

1).垂直居中.将 line-height 设放为以后 div 雷同的高度, 再通功 vertical-align:

middle.( 注意内容不要换止.)

2).程度居中. margin: 0 auto;(该然不是万能)

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

4, FF 和 IE 对于 BOX 懂得的差别招致相差 2px 的还有设为 float的div正在ie下

margin加倍等问题.

5, ul 标签在 FF 下面默许有 list-style 和 padding . 最佳事前声亮, 以防止不用要的费事.

(罕见于导航标签和内容列表)

6, 做为外部 wrapper 的 div 不要定死高度, 最佳还加上 overflow:

hidden.以到达高度自顺应.

7, 闭于手形光标. cursor: pointer. 而hand 只实用于 IE.

1 针对firefox ie6 ie7的css样式

如今大部门都是用!important来hack，关于ie6和firefox测试可以一般显示，

但是ie7对!important可以准确说明，会招致页面出按请求显示！觅到一个针

对IE7不错的hack方法就是使用“*+html”，如今用IE7涉猎一下，应当出有问题了。

如今写一个CSS可以这样：

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999; }

那么在firefox下字体色彩显示为#333，IE6下字体色彩显示为#666，IE7下字体色彩显示为#999。

2 css布局中的居中问题

重要的样式订义如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

阐明：

首先在女级元素定义TEXT-ALIGN:

center;这个的意义就是在女级元素内的内容居中；关于IE这样设定就已经可以了。

但在mozilla中不能居中。解决措施便是在子元荤定义时分设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT:

auto; ”

须要阐明的是，假如您念用这个方式使整个页里要居中，倡议不要套正在一个DIV里，您可以顺次搭出少个div，

只需正在每个搭出的div里订义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 便能够了。

3 盒模型不同说明.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

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

width :500px; //for ie6.0-}

4 浮动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;

5 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;}

6 页面的最小宽度

min-width是个十分便利的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版不断准确。但IE不认得这个，

而它实践上把width该做最小阔度来使。为了让这一命令在IE上也能用，可以把一个

搁到

标签下，然后为div指订一个类：

然后CSS这样设计：

#container{ min-width: 600px;

width:expression_r(document.body.clientWidth < 600?

"600px":

"auto" );}

第一个min-width是一般的；但第2止的width使用了Javascript，这只要IE才认得，那也会让您的HTML白档不太正规。它实践上通功Javascript的断定来完成最小阔度。

7 肃清浮动

.hackbox{ display:table; //将对象做为块元素级的表格显示}或许.hackbox{

clear:both;}

或许参加:after(伪对象),设置在对于象后产生的内容，通常和content合作使用，IE不支撑彼伪对象，非Ie

涉猎器支持，

所以并没有影响到IE/WIN阅读器。那类的最费事的......#box:after{ content:

"."; display: block; height: 0;

clear: both; visibility: hidden;}

8 DIV浮动IE白原产生3象荤的bug

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

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

width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px;

//这句是要害}

HTML代码

id="box">

id="left">

id="right">

9 属性挑选器(这个不能算是兼容,是暗藏css的一个bug)

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

这个关于IE6.0和IE6.0以下的版原皆暗藏,FF和OPera做用

属性选择器和子选择器仍是有区别的,子挑选器的范畴自情势来道缩小了,属性挑选器的规模比拟大,如p[id]中,一切p本签中有id的皆是同样式的.

10 IE捕迷躲的问题

当div利用庞杂的时分每个栏中又有一些链交，DIV等这个时分轻易产生捕迷躲的问题。

有些内容显示不进去，当鼠标选择这个区域是发明内容确切在页面。

解决措施：对#layout使用line-height属性或许给#layout使用流动高和宽。页面构造绝质简略。

11 高度不顺应

高度不顺应是当内层对象的高度产生变化时外层高度不能主动入行调理，特殊是当内层对象使用

margin 或者paddign 时。

例：

id="box">

p对象中的内容

CSS：#box {background-color:#eee; }

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

}

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