Posts Tagged ‘div’

常用浏览器兼容 hack 收集

July 11th, 2009

屏蔽IE浏览器(也就是IE下不显示)

*:lang(zh) select {font:12px  !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px  !important;} /*safari可见*/

这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别

*+html  select {…}

当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE7可以识别

*+html  select {…!important;}

当面临需要只针对IE7做样式的时候就可以采用这个HACK。

IE6及IE6以下识别

* html  select {…}

这个地方要特别注意,很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。

这句与上一句的作用相同。

仅IE6不识别,屏蔽IE6

select { display /*屏蔽IE6*/:none;}

这里主要是通过CSS注释分开一个属性与值,注释在冒号前

仅IE6与IE5不识别,屏蔽IE6与IE5

select/**/ { display /*IE6,IE5不识别*/:none;}

这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

仅IE5不识别,屏蔽IE5

select/*IE5不识别*/ {…}

这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。

盒模型解决方法

select {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}

盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动

select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别

@media all and (min-width: 0px){ select {……} }

针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见

@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */

IE5/MAC的过滤器,一般用不着

/*\*//*/
@import “ie5mac.css”;
/**/

IE的if条件Hack

<!–[if IE]> Only IE <![endif]–>
所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–>
仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
仅IE7可识别

区分大小写的hack

p.casesensitive {color: #000;} /*ie6*/
body[align~=left] p.casesensitive {color: red;} /*ie7*/
body[align~=LEFT] p.casesensitive {color: #ccc;} /*FF,OP*/
<body align=”left”> <p>
IE7红色、Firefox灰色、IE6黑色</p>

IE8、IE7、IE6、Firefox2.0.0.12的一些CSS HACK测试

IE8、IE7、IE6、Firefox2.0.0.12的一些CSS HACK测试

IE8、IE7、IE6、Firefox2.0.0.12的一些CSS HACK测试

div + css命名规则

July 11th, 2009

页头
header
页面主体
main
新闻
news
登录条
loginBar
内容
content
下载
download
标志
logo
标签页
tab
注册
regsiter
侧栏
sideBar
文章列表
list
状态
status
广告
banner
提示信息
msg
按钮
btn
导航
nav
小技巧
tips
投票
vote
子导航
subNav
栏目标题
title
合作伙伴
partner
菜单
menu
加入
joinus
友情链接
friendLink
子菜单
subMenu
指南
guild
页脚
footer
搜索
search
服务
service
版权
copyRight
滚动
scroll
热点
hot

1.CSS ID 的命名

外套
wrap
顶导航
topnav
子菜单
submenu
主导航
mainNav
边导航
sidebar
边导航图标
sidebarIcon
子导航
subnav
左导航
leftsideBar
注释
note
页脚
footer
右导航
rightsideBar
容器
container
整个页面
content
旗志
logo
内容
content
页眉
header
标语
banner
搜索
search
页脚
footer
菜单内容1
menu1Content
登陆
login
商标
label
菜单容量
menuContainer

标题
title
当前的
current

主导航
mainNav(globalNav)
功能区
shop(如购物车,收银台)
面包屑
breadCrumb(即页面所处位置导航提示)

2.另外在编辑样式表时可用的注释可这样写:

<– Footer –>
内容区
<– End Footer –>

3.样式文件命名

主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

广告位出售