Css样式兼容

一、overflow解决float浮动后高度自适应问题

发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。

如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：

怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可

overflow:auto；zoom:1；

overflow:auto；是让高度自适应，zoom:1；是为了兼容IE6，也可以用height:1%；的方式来解决。

二、CSS清理浮动方式

1.清理浮动有很多种方式，像使用br标签自带的clear属，使用元素的overflow，使用空标签来设置clear:both等等。

2.考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。

/*清理浮动*/

.clearfix:after{

visibility:hidden；

display:block；

font-size:0；

content:""；

clear:both；

height:0；

}

.clearfix{

zoom:1；

}

其原理是，在「高级」浏览器中使用:after伪类在浮动块后面加上一个非display:none的不可见块状内容来，并给它设置clear:both来清理浮动。在ie6和7中给浮动块添加haslayout来让浮动块撑高并正常影响文档流。

上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在，NicolasGallagher给出了一个更简洁的方案：

.cf:before,.cf:after{

content:""；

display:table；

}

.cf:after{

clear:both；

}

.cf{

zoom:1；

}

原理还是一样的。使用:after伪类来提供浮动块后的clear:both。不同的是，隐藏这个空白使用的是display:table。而不是设置visibility:hidden；height:0；font-size:0；这样的hack。

值得注意的是这里中的:before伪类。其实他是来用处理top-margin边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建blockformattingcontext，这样浮动元素上的另而一元素上如果刚好有margin-bottom而这个浮动元素刚好有margin-top的话，应该让他们不折叠（虽然这种情况并不常见）。

3.在网页中，DIV一般都是嵌套的，外面称为窗口，里面的DIV存放内容，如果不浮动的话，如下面这段代码

<divstyle=”background:#ccc;”>

<divstyle=”float:left;width:30%;height:40px;background:#333;“>Contenthere</div>

</div>

本来我们期望看到的是，外面背景为#ccc的层包含了里面背景为#333的层，但实际上，外面的层在显示的时候高度几乎为0，这就是因为里面的层用了浮动，但如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了。这时，如果我们在里面清除浮动

<divstyle=”background:#ccc;”>

<divstyle=”float:left;width:30%;height:40px;background:#333;“>Contenthere</div>

<divstyle=”clear:both”></div>

</div>

那么显示就正常了。

三、解决IE6双边距的问题

a)在火狐浏览器下浏览是正确的,但是在IE6下浏览是双倍的magin-left.这是IE6的一个bug.

解决办法是给浮动的层增加属性：display:inline，取消其块级元素的属性。

b)在ff中如果两个块级元素要排在同一行，需要使用float来解决。在ie6中,块级元素会把另外的块级元素赶到另一行。

在前一个块级元素上加上float:left;之后，在ie6中就会显示两个块级元素在同一行。但是在ff中我们会发现后一个块级元素与前一个块级元素重叠了，解决方法就是在后一个块级元素上也加上float:left;

四、CSS中的强制换行与强制不换行

/*禁止换行*/

.nowrap{word-break:keep-all；white-space:nowrap；}

/*强制换行*/

.break{word-break:break-all；}

在不想换行的标记上加入样式nowrap，在需要强制换行的地方加入样式break，这样就实现了强制换行与不换行了。

五、怎么把标题超出部分设置成“……”

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>无标题文档</title>

<style>

.ellipsisspan{

white-space:nowrap;

text-overflow:ellipsis;/*forinternetexplorer*/

overflow:hidden;

width:190px;

display:block;

}

html>body.ellipsis{

clear:both;

}

html>body.ellipsisspan:after{

content:"...";

}

html>body.ellipsisspan{

max-width:180px;

width:auto!important;

float:left;

}

</style>

</head>

<body>

<divclass="ellipsis">

<span>www.aa25.cn—毛毛虫是怎么渡过面前的大河的？答案长成蝴蝶

</span>

</div>

</body>

</html>

六、关于DIV高度自动伸展的问题

问题：一个DIV的最小高度是400PX,当内容高度不足400PX时,其高度设置为400PX,当内容高度大于400PX,则按实际高度伸展。

IE6和FIREFOX都要有效!

答案：

.a{height:400px;height:auto;min-height:400px;width:500px;}

七、什么是CSShack？针对不同的浏览器去写不同的CSS

1.由于不同的浏览器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSScode的过程，就叫CSShack,也叫写CSShack。

CSSHack的原理是什么

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

IE6IE7FireFox

下划线_yes

星号*yesyes

!importantyesyes

Yes-识别no-不识别

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

如何写CSSHack

比如要分辨IE6和firefox两种浏览器，可以这样写：

<style>

div{

background:green；/*forfirefox*/

*background:red；/*forIE6*/

}

</style>

我在IE6中看到是红色的，在firefox中看到是绿色的。

IE专用的条件注释

<linkrel="stylesheet"type="text/css"href="css.css"/>

<!--[ifIE7]>

<linkrel="stylesheet"type="text/css"href="ie7.css"/>

<![endif]-->

<!--[iflteIE6]>

<linkrel="stylesheet"type="text/css"href="ie.css"/>

<![endif]-->

八、CSS中的!important属性用法

关于CSS的运用技巧有很多，今天主要探讨一下CSS中!important这个属性的用法。在CSS的使用中，遇到最多的问题就是不同浏览器之间的兼容问题。由于IE并不严格执行W3C标准，而又几乎垄断了浏览器市场。所以作为一名合格的网站制作人员，必须要针对不同的浏览器进行微调。实现不同浏览器之间兼容的方法有很多，比如利用JS探测用户的浏览器类型，从而调用不同的样式表。或者就是利用！important属性来实现微调的效果。下面是具体的例子。

下面是一段普通的DIV代码：

<divid="a"></div>

下面是有关层A在CSS样式表中的定义，注意，这里使用了！important这个属性。

#a{margin-left:30px!important;margin-left:20px;}

在上面的例子中，层a在IE浏览器中，左边距为20像素，而在Firefox中，左边距则变为30像素。这是因为，!important在CSS中表示优先调用，由于IE不能够识别这个属性，所以在IE中，只能够调用“margin-left:20px;"这个选项，所以同样的一段代码，在Firefox和IE中就会显示不同的样式。

不过值得注意的是，最新版的IE7.0已经可以识别!important，这个属性了，但是IE6.0仍然不能识别。所以这个小技巧还是相当有用的.

九、display:inline；与float:left；的用途

display:inline；(内联)《CSS权威指南》中文字显示：

任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式。“行布局”的意思就是说其表现形式始终以行进行显示。

比如，我们设定一个内联元素border-bottom:1pxsolid#000；时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

当然这看起来不像是display:inline；与float:left；的区别所在，但是当理解了float:left；的特性那么我们就清楚到底是怎么回事了。

float:left；(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

那么我们很清楚了，内联(display:inline；)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。

十、用CSS实现段落前面缩进两个字

<styletype="text/css">

<!--

text-indent:2em;/*em是相对单位，2em即现在一个字大小的两倍*/

}

-->

</style>

<p>段落前面空两个字的距离，不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。</p>

十一、常用的列表元素ulollidldtdd释义

ol有序列表

<ol>

</ol>

表现为

1……

2……

3……

ul无序列表，表现为li前面是大圆点而不是123

<ul>

</ul>

很多人容易忽略dldtdd的用法

dl内容块

dt内容块的标题

dd内容

可以这么写：

<dl>

</dl>

dt和dd中可以再加入olulli和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

十二、让IE6、IE7、IE8支持CSS3的圆角、阴影样式

想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下：

但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。

CSS3有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。

因为IE6时代，没有什么标准，而因为各种原因，IE6用户几乎不会更新IE版本。

让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用VML模拟。

VML是TheVectorMarkupLanguage(矢量可标记语言)，原本是微软自己开发的东西，很强大。

也就是说，IE下面，可以用VML做出圆角。半透明、阴影、渐变背景。

早在去年的时候，就有老外这个思路写成了插件，方便前端程序员开发。。。

它可以让IE6，IE7，IE8支持CSS3特效……

之前的bug一直有一个严重bug，今天上去看的时候，官方修正了这个Bug，并且增加了js渲染方法（之前是用behavior导入）。

看看如何调用：

1、在你的网页加载PIE.js脚本。

注意，用IE专用的注释，防止非IE浏览器下载。

<!--[ifltIE10]>

<scripttype="text/javascript"src="PIE.js"></script>

<![endif]-->

2、用js调用：

$(function(){

if(window.PIE){

$('.rounded').each(function(){

PIE.attach(this)；

})；

}

})；

3、已经搞定了。

在让IE6支持CSS3的所有插件中，这个应该是最好的插件了。

官方实时测试例子：http://css3pie.com/

官方下载：http://css3pie.com/download-latest

测试了半天也不行，谁知太大意了，忽略了两点，一是在本地预览无效，得传到服务器环境下，或者本地服务器环境，二是在css里忘记加behavior:url(pie.htc)；造成的。今天终于测试可用了，但新的问题又来了，我用的是自适应宽度，加上后会出现横向滚动条，去掉就好了，其他情况下正常，而且对文字阴影好像没有效果，不知道大家遇到这样的问题没有，如想使用的朋友可以试试吧，附本人制作的实例：

十三、有利于SEO的DIV+CSS的命名规则

为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：

页头:header

登录条:loginBar标志:logo

侧栏:sidebar

广告:banner导航:nav

子导航:subNav

菜单:menu

子菜单:submenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

友情链接:friendLink

页脚:footer

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

状态:status

按钮:btn

投票:vote

合作伙伴:partner

版权:copyright

CSSID的命名

外套:wrap

主导航:mainNav

子导航:subnav

页脚:footer

整个页面:content

页眉:header

商标:label

标题:title

主导航:

mainNav(globalNav)

顶导航:topnav

边导航:sidebar

左导航:leftsideBar

右导航:rightsideBar

旗志:logo

标语:banner

菜单内容1:

menu1Content

菜单容量:

menuContainer

子菜单:submenu

边导航图标:

sidebarIcon

注释:note

面包屑:breadcrumb

(即页面所处位置导航提示)

容器:container

内容:content

搜索:search

登陆:login

功能区:shop

(如购物车，收银台)

当前的current

样式文件命名

主要的:master.css

布局版面:layout.css

专栏:columns.css

文字:font.css

打印样式:print.css

主题:themes.css

Css样式兼容

相关推荐