@import的最优写法

@import的写法一般有下列几种: @import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import “style.css” // Windows IE4/ NS4, Macintosh IE4/NS4不识别 @import url(style.css) // Windows NS4, Macintosh NS4不识别 @import url(‘style.css’) // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import url(“style.css”) //Windows NS4, Macintosh NS4不识别 由上分析知道,@import url(style.css) 和 @import url(“style.css”) 是最优的选择,兼容的浏览器也是最多了。而从字节优化的角度来看@import url(style.css) 无愧于最值得推荐的写法。

... 0 条评论»

网站重构的流程

经常有人问网站重构的流程是先写 DIV 还是先写 CSS ,对于这个问题本人的理解如下: 先结构,后表现,再行为。通俗点就是先 HTML 构架,再 CSS 渲染,最后写入 Javascript。 在 Ajaxian 上看到的一个Gif 动画正好简单阐述了网站从结构到表现的过程。

... 3 条评论 »

IE6下图片下方有空隙的解决方法

方法一:改变 html 的排版 例如: <div> <img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” /> </div> 改为: <div><img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” /></div> 方法二:设置 img 为 display:block 方法三:设置 vertical-align 属性为 top | bottom |middle |text-bottom

... 6 条评论 »

CSS解决未知高度垂直居中

尽管有 CSS 的 vertical-align 特性,但是并不能有效解决未知高度的垂直居中问题(在一个 DIV 标签里有未知高度的文本或图片的情况下)。 标 准浏览器如 Mozilla, Opera, Safari 等.,可将父级元素显示方式设定为 TABLE(display: table;) ,内部子元素定为 table-cell (display: table-cell),通过 vertical-align 特性使其垂直居中,但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部 50% ,里面再套个元素距顶部 -50% 来抵消。 CSS部分: body { padding: 0; margin: 0; } body,html{ height: 100%; } #outer { height: 100%; overflow: hidden; position: relative; width: 100%; background:ivory; } #outer[id] { display: table; position: […]

... 9 条评论 »

翻译:The Underscore Hack

下划线“_”在 CSS2.1 规范中是被承认的 CSS 标识。 浏览器会忽略未知的 CSS 属性。 MSIE5+(Windows)会忽略 CSS 属性名前的 “_”。 因此,这个 CSS 的分析是,例如: _color:red。首页, 正确的,对于 CSS2.1 规范来说是被允许的(即使软件验证,只支持 CSS2.0 老版本,说它是一个 Bug :他们是错误的,但它是正确的)。其次, 被任何浏览器忽略,除了 IE 。最后, 当颜色被处理:在 WinIE 中是红色。 如上,这就是所说的 IE 的 Bug ,特征是以简单明了的方式建立仅对 WinIE 有效的 CSS 属性(MacIE 没有这样的 Bug 和特征)。这样很容易调整,例如被错误执行的位置:在 WinIE 中被调整(见例子)。 #menu { position: fixed; _position: absolute; … } 同样的方法可以用来调整 min-height 的属性在 WinIE […]

... 1 条评论 »

CSS定义通用透明效果

分别定义各种浏览器的透明效果: .transparent{ filter:alpha(opacity=12); -moz-opacity:0.12; opacity:0.12; background-color:#000; } filter:alpha(opacity=12); 支持 IE 浏览器 -moz-opacity:0.12; 支持 FireFox 浏览器 opacity:0.12; 支持 Opera,safari 等浏览器

... 4 条评论 »

IE7 下hack的方法

“*+html”是 css 的中的选择符,被 IE7 与 IE5.01 所使用,而区分 IE7 与 IE5.01 又有很简单的方法,便是 important,这样把 important 写在前面,就形成了单独针对 IE7 hack 的方法了。 *+html div.IE7 { display:block !important; display:none; } 还有另外一个方法《The IE7 CSS Hack》,不过不推荐使用。

... 0 条评论»