Css样式兼容

廖世勇

浏览: 90320 次
性别:
来自: 湖南郴州

最近访客更多访客>>

kopekp

stingice

sinohxm

fctxhuihui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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 来让浮动块撑高并正常影响文档流。
上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在，Nicolas Gallagher 给出了一个更简洁的方案：
.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 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。

3. 在网页中，DIV一般都是嵌套的，外面称为窗口，里面的DIV存放内容，如果不浮动的话，如下面这段代码
<div style=”background:#ccc;”>
<div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div>
</div>
本来我们期望看到的是，外面背景为#ccc的层包含了里面背景为#333的层，但实际上，外面的层在显示的时候高度几乎为0，这就是因为里面的层用了浮动，但如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了。这时，如果我们在里面清除浮动
<div style=”background:#ccc;”>
<div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div>
<div style=”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，这样就实现了强制换行与不换行了。
五、怎么把标题超出部分设置成“……”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>
<style>
.ellipsis span {
white-space:nowrap;
text-overflow:ellipsis; /* for internet explorer */
overflow:hidden;
width:190px;
display:block;
}
html>body .ellipsis {
clear:both;
}
html>body .ellipsis span:after {
content: "...";
}
html>body .ellipsis span {
max-width:180px;
width:auto !important;
float:left;
}
</style>
</head>
<body>
<div class="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;}
七、什么是CSS hack？针对不同的浏览器去写不同的CSS
1.由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
　　CSS Hack的原理是什么
　　由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
IE6 IE7 FireFox
下划线_ yes
星号* yes yes
!important yes yes
Yes-识别 no-不识别
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：
<style>
div{
background:green； /* for firefox */
*background:red； /* for IE6 */
}
</style>
我在IE6中看到是红色的，在firefox中看到是绿色的。
IE专用的条件注释

<link rel="stylesheet" type="text/css" href="css.css" />


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

<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

八、 CSS中的!important属性用法
关于CSS的运用技巧有很多，今天主要探讨一下CSS中 !important 这个属性的用法。在CSS的使用中，遇到最多的问题就是不同浏览器之间的兼容问题。由于IE并不严格执行W3C标准，而又几乎垄断了浏览器市场。所以作为一名合格的网站制作人员，必须要针对不同的浏览器进行微调。实现不同浏览器之间兼容的方法有很多，比如利用JS探测用户的浏览器类型，从而调用不同的样式表。或者就是利用！important 属性来实现微调的效果。下面是具体的例子。
下面是一段普通的 DIV 代码：
<div id="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中就会显示不同的样式。
不过值得注意的是，最新版的IE 7.0 已经可以识别 !important，这个属性了，但是IE 6.0仍然不能识别。所以这个小技巧还是相当有用的.
九、 display:inline；与float:left；的用途
display:inline；(内联)《CSS权威指南》中文字显示：
任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式。 “行布局”的意思就是说其表现形式始终以行进行显示。
比如，我们设定一个内联元素border-bottom:1px solid #000；时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。
当然这看起来不像是display:inline；与float:left；的区别所在，但是当理解了float:left；的特性那么我们就清楚到底是怎么回事了。
float:left；(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。
那么我们很清楚了，内联(display:inline；)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。
十、用CSS实现段落前面缩进两个字
<style type="text/css">

</style>
<p>段落前面空两个字的距离，不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。</p>
十一、常用的列表元素ulol li dl dtdd释义
ol 有序列表
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为
1……
2……
3……
ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>

很多人容易忽略 dl dtdd的用法
dl 内容块
dt 内容块的标题
dd 内容

可以这么写：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt 和dd中可以再加入 olul li和p
理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。
十二、让IE6、IE7、IE8支持CSS3的圆角、阴影样式
想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下：
但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。
CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。
因为IE6时代，没有什么标准，而因为各种原因，IE6用户几乎不会更新IE版本。
让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用 VML 模拟。
VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。
也就是说，IE下面，可以用 VML做出圆角。半透明、阴影、渐变背景。
早在去年的时候，就有老外这个思路写成了插件，方便前端程序员开发。。。
它可以让IE6，IE7，IE8 支持 CSS3特效……
之前的 bug 一直有一个严重 bug，今天上去看的时候，官方修正了这个Bug ，并且增加了js 渲染方法（之前是用behavior导入）。

看看如何调用：
1、在你的网页加载 PIE.js 脚本。
注意，用IE专用的注释，防止非IE浏览器下载。


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
注册:register
状态: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

分享到：