CSS

完美解决IE6不支持position:fixed的bug

最近在写前端的时候发现IE6下存在不支持position:fixed的bug。通过查找资料找到了较完美的的解决方法。代码如下：

1
2
3
4
5
6
7
8
/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

Read More

CSS

关于ie6、ie7折行问题

HTML结构及CSS样式如下：

1
li {float:left; margin-right:10px; }
1
2
3
4
5
<ul>
	<li><a href=”#">文本1</a></li>
	<li><a href=”#">文本2</a></li>
	<li><a href=”#">文本3</a></li>
</ul>

这个时候，在ie6、ie7中文字很可能出现断行（暂没发现其他浏览器出现这个问题）

解决问题方法：

  1. 如果文本中没有空格，用word-break属性的keep-all参数可解决这个问题。
  2. 如果文本中有空格，用white-space属性的nowrap参数可解决问题。

    Read More

CSS

关于团队合作的css命名规范

(一)常用的css命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

Read More