css使内外容器等高

在web开发中有时候需要是被包裹的容器与包裹的容器等高,在非ie6的情况下可以使用外层容器相对定位,内层容器绝对定位并设置内层容器的高度为100%来实现;但在ie6下即使你设置了height=100%依然无效;原因是在ie6下要使内层元素的高度为100%,外层元素必须要设置一个固定的高度(但实际情况是外层元素是被撑开的,这个高度也就无法固定了),难道就没有办法了么?当然不是,我们可以使用css中的_height:expression(document.getElementById(‘div2′).offsetHeight+”px”);通过js动态获取外层元素的高度。当然这个地方的js也可以jquery的代码,前提是你要先引入jquery的库文件。

下载demo:ie6-height

光标在文本框中的大小在各个浏览器表现不一致的解决方案

今天有人问了谷歌和火狐下input输入框中的光标大小显示不一致,之前都没遇到过这~把人家的解决方法转过来先~~~
以前在项目里碰到过一个问题
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,

在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,

chrome下光标跟input的height一样高,

而IE下光标跟文字的大小一致。

一直没弄明白为什么这样子,今天听罗浮宫里的同学一讨论,才知道原因所在。

初步结论如下:

IE:不管该行有没有文字,光标高度与font-size一致。

FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决的方案:
给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}

IE6、IE7、IE8、Firefox兼容性CSS HACK代码

1.区别IE和非IE浏览器CSS HACK代码

 #divcss5{
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
}

 

2.区别IE6,IE7,IE8,FF CSS HACK
【区别符号】:「\9」、「*」、「_」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

 

3.区别IE6、IE7、Firefox (EXP 1)
【区别符号】:「*」、「_」
【示例】:

 #divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

 

4.区别IE6、IE7、Firefox (EXP 2)
【区别符号】:「*」、「!important」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}

【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

 

5.区别IE7、Firefox
【区别符号】:「*」、「!important」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}

【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔IE7和Firefox。

 

6.区别IE6、IE7 (EXP 1)
【区别符号】:「*」、「_」
【示例】:

 #tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

 

7.区别IE6、IE7 (EXP 2)
【区别符号】:「!important」
【示例】:

 #divcss5{
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}

【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

 

8.区别IE6、Firefox
【区别符号】:「_」
【示例】:

 #divcss5{
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。

IE6下常见的兼容性问题

1、根据不同的版本加载不同的css文件
<!–[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]–>
<!–[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]–>
<!–[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6)。 <![endif]–>
<!–[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]–>
<!–在 IE6及IE6以下版本中加载css–>
<!–[if lte IE 6]> <link type=”text/css” rel=”stylesheet” href=”css/ie6.css” mce_href=”css/ie6.css” /><![endif]–>
缺点是在IE浏览器下可能会增加额外的HTTP请求数。

2、CSS选择器区分
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。

3、最小高度
ie6不支持min-height属性,但它会将height直接作为最小高度,解决办法:
#container {min-height:200px; _height:200px;}

4、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}

5、100% 高度
在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义height:100%;

6、双边距Bug
当元素浮动时,IE6会错误的把浮动方向的margin值双倍计算。需要将浮动元素设置{display:none;}来解决。

7、css透明的问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
[注] 最好两个都写,并将opacity属性放在下面。

8、css圆角
IE:ie7以下版本不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现。

9、cursor:hand VS cursor:pointer
问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。
解决方法:统一使用pointer。

10、字体大小定义不同
对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。
解决方法:使用指定的字体大小如14px。

11、ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效。
[注]经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

利用css解决居中问题

同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋,下面让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。

CSS常见的让元素水平居中显示方法

用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。

1.使用自动外边距实现居中

CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为该容器指定宽度:

div#container{ margin-left:auto; margin-right:auto; width:168px; }

在大多数主流浏览器中,这种方法都非常有效,即使是Windows平台上的IE6,在其标准兼容模式(compliancemode)下也能够正常显示。但不幸的是,在更低版本的IE中,这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法,那么就要确保用户的IE浏览器版本不低于6.0。

尽管在支持上不尽如人意,但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。

2.使用text-align实现居中

另一种实现元素居中的方法是使用text-align属性,将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack,但它却能兼容大多数浏览器,所以在某些情况下也自然必不可少。

之所以说它是hack,是因为这种方法并没有将文本属性应用到文本上,而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后,我们要按照如下代码为body应用text-align属性:

body{ text-align:center; }

之后会出现什么问题吗?body的所有子孙元素都会被居中显示。

因此,我们就需要用再写一条规则,让其中的文本回到默认的居左对齐:

p{ text-align:left; }

可以想象这条附加的规则将带来一些不便。另外,真正完全遵循标准的浏览器并不会改变容器的位置,而只会让其中的文字居中显示。

3.组合使用自动外边距和文本对齐

因为文本对齐居中方式有着良好的向下兼容性,且自动外边距方式也被大多数当代浏览器支持,所以很多设计师将二者组合起来使用,以期让居中效果得到最大限度的跨浏览器支持:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; width:168px; text-align:left }

可是这始终是个hack,无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则,但至少在各个浏览器中看起来都不错。

4.负外边距解决方案

负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。

下面是该方案的具体实现方法。首先,创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边边缘50%的位置。这样,该容器的左外边距将从页面50%宽度的位置开始算起。

然后,将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; position:absolute; left:50%; width:760px; margin-left:-380px; }

看,没有任何hack!虽然这并不是首选的解决方案,但也是个不错的方法,且适用性极广—甚至在NetscapeNavigator4.x中都没有任何问题,很令人吃惊,不是吗?所以若想得到最广泛的浏览器支持,那么这种方法将会是最好的选择。

css浮动元素无法对齐

有时候在一行中两个元素,一个元素固定,一个元素使用了浮动,此时若浮动之后两个元素无法在一行内对齐可以将两个元素互换位置,问题解决!

css固定浮动层的实现

在css中要实现固定浮动层可以使用{position: fixed;top:0px;}来实现,但是在ie6下不支持position: fixed属性要实现这个效果可以使用

{height:36px;background:url(../images/top_bg.jpg); position: fixed;z-index: 1000;width: 100%; top:0px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}

在ie6下使用inline-block

css中display:inline-block在ie8才开始支持,要让ie6具备这个属性可以是用一下两种办法:

1、可以先触发layout,再设置为inline,需要注意的是这两个display必须在两个CSS声明中才有效

div {
width:400px;
height:200px;
display:inline-block;
}
div {
display:inline;
}

2、直接设置为inline,再利用zoom来触发layout来实现类似效果

div {
width:400px;
height:200px;
*display:inline;
*zoom:1;
}