最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~

demo 传送门： vertical-align 各属性分析 有错误欢迎回复纠正哦 ^__^

一些心得体会：

vertical-align 定义

最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~ 我理解错了
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。

vertical-align:baseline 基线对齐

分析所得，发现baseline不是在中文字的可见部分最下方，而是在英文字的可见部分最下方。
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。一直觉得为啥图片下方会有4像素的空白，现在明白了

不同字体会有不同效果

我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。

vertical-align 最好不要混用

从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。

vertical-align: px 定位最稳定

这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。
在研究中发现使用相对定位兼容性最好，只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计。
不过这种方法也不是万能的，
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。
另外图片大小不一样大相应的负值也不相同，详细见demo。

高潮：vertical-align 最佳兼容方案

前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。
2. 针对 内部需要调整位置的 图片等 进行 px 定位。
优点：保证外围的vertical-align 是默认值，不产生混用现象。
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。

下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• css心得之善用 position:relative
• IE8 不定尺寸图片垂直居中引起的 bug

技术文，看不懂可以提问哇，实在看不懂就挑好玩的看^__^ 很湿~
此文章堆在后台好久了，一直都没找到配图，思路也没理清楚，于是都快臭了~

好吧进入正文~~
=========================华丽的吐槽线======================
可能是个人习惯吧，我个人在写css 样式的时候 position:relative 都很少用。不到逼不得已不用，因为这东西在面对IE大叔的时候总是会各种被推到，比如多个positon 嵌套的的时候 会产生 类似 z-index 优先级的失控，不知道其他coder们碰到过这个问题没？反正我是碰到不下1次了。

举个栗子如下：html 代码 节略写法，你懂的

ul.pp
    li 大宝   span 大宝的屁屁
    li 二宝   span 二宝的屁屁
    li 三宝   span 三宝的屁屁

从上面 的代码 本来没啥问题，问题在于给他穿上衣服(css)之后，因为一些需求，你讲li 的css position:relative 了，
那么li 就傻逼了，这个时候你怎么设置li 的z-index 为多大 都盖不过 之后下一个li 的内容。
不理解上面表达的意思可以见下图。

css代码

.pp{
	width:300px;
	margin:50px auto;
	background:#fff;
	height:300px;
	padding:10px;
}
.pp li{
	border:1px solid #ccc;
	margin-bottom:10px;
	height:30px;
	position:relative;
	background:#fff;
	z-index:9;
}

.pp span{
	display:block;
	width:40px;
	height:40px;
	background:#f09;
	position:absolute;
	right:10px;
	bottom: -20px;
	z-index:10;
}

如图，左边是chrome 下的效果，右侧是IE6的效果，可见，当给li 设置positon:relative 后无论 里面的 元素设置z-index 为多大，都改不过之后的li 内容。(爷的我又把上面的字重新打了一遍 = =)

解决方案

从视觉上面理解，这样的情况就像 AI(Illustrator)里的图层一样，一层比一层高，也像个沙箱，内部的z-index 是怎么也不能超越下一层的z-index。
最好不要给列表型的li 或者 div 添加 position:relative，一直以来针对IE这样头疼的bug，都是以避开这样的情况来解决。(其实应该不算bug，应该是浏览器开发者理解性上的不同)。

当然还有一种办法，由于是因为下一个li 设置了position 盖住了前一个position 的 li，那么只要避免position盖住position就可以勉强实现这样的情况。所以你只需要在position:absolute的dom外面套一层div，做到不盖住前一个li中的 position:absolute就可以。

另外一种方法是在特定的情况下如hover事件，如触发式 弹出浮窗(显示更多信息)，
这个时候我是这样来实现， 当hover的时候 给 li 添加一个class “hover”， 然后只要定义hover 的时候是position:relative就可以了，这样的好处是hover 的时候其他 li 没有position:relative ，那么就没有之前的bug了。
对于高级浏览器 可以直接写:hover 甚至都可以脱离 js 效率会更高

position:relative 在:hover 上的妙用

先看下图，左侧这样的按钮不知道应该会在一些效果里接触过吧？类似向左向右的按钮，

仔细观察发现按钮中间的线是共享的，但是按下去的时候颜色会变深。
实现办法很多，我一般是对其中一个按钮使用负边距，然后在:hover效果上动手脚(由于IE6只支持a上的hover，所以一般都是使用a)，其实很简单就是在hover 的时候，给它设置position:relative，然后将z-index 设置一个数字就可实现。

以此类推，上图中apple 的导航也可以使用这样的办法来实现效果。是不是挺带感^__^

好了，要是有更好的idea 可以留言评论。

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• IE8 不定尺寸图片垂直居中引起的 bug

看这篇文章前可以先 去看下下面这篇文章. 精简高效的CSS命名准则/方法
当一个css 代码年龄超过 2年的淫都会想着怎样去偷懒,去节省那些重复的样式代码.
于是就出现了很多流派. (以下名字都湿我YY, 哥只是 非专业的)
比如
直肠流: 写css 属性不换行. e.g..class{color:red; }
短线流: 写css 喜欢用短词用中横线链接 e.g. .home-notice-tit{...}
and so on..
当然也有上面文章里的 大牛 使用分离 流 e.g. .pl4{padding-left:4px }
因为这样的分离流, 咱们 星罗 发飙了, 发扬愤青应有的愤怒.
的确, .pl4 .pl10 这样的做法 飞鱼我也是很鄙视的, 丫 跟内联样式 有啥区别,
如评论所说的, 这样写无非是再写天书, 缺点毛多.
就像星罗 说的一样,因为尝试过了,之后发现大的问题, 然后放弃了.

过分进行属性分离的后果

• 1.可读性: 1星, 还需要别人是很努力的记下你的缩写表.
• 2.可维护性: 1星, 曾经有个需求让哥去掉, 某tit(上左右1px border),的boder,然后给tit加 一个背景, 代码类似: bt1 bl1 br1 .丫的, 搜了一下有他娘的40哥文件上百处.
• 3.CSS Sprites:1星, 用CSS Sprites 的时候,会很囧rz ,用了就知道
• 4.不可压缩及分布式调用: 随着需求越来越复杂, 公用样式包会越来越大, 又不能切分, 对于多样化的页面将是噩梦,会遇到 只有丁点样式,而不得不调用庞大样式得尴尬情况
• 5. 还有好多…

以上只是过分 属性分离的后果.
但是上文中张鑫旭的文章 中也有好的部分, 比如他的 oocss 对象式css 书写规则,
这种对象式的书写方法也是我慢慢积累出来的一种方法.
oocss 的 书写带来的效率及性能可以看这里: 翻译:同CSS技术及其CSS性能
也可以查看我之前写的 又见IE6吐槽~ 并行结构式class引起的bug

好了回归主题, 说说我对 OOCSS 对象式css 书写的理解,还有心得.

什么是OOCSS ( Object Oriented CSS )

其实我是个土人, 没有5车的学府, 这名字还是之前google 来的 .
这个相信 接触过OO面向对象 思想的人, 马上就能明白 其中的奥义, 飞鱼不才, 大学的时候接触过 oo 的毛皮, 接触了一些as3的面向对象 思想,然后 是php , 最近又在折腾 小八的wince VC.
所以 对oo 还是略懂略懂. 大牛看到了不要取笑,就当是 学前班不懂事的娃

所谓面向对象简单的说就是 every thing is object . 其实这句话也挺抽象的 ^__^
更简单的说就是 用面向对象的思路 去 书写html 以及css 命名规则.

OOCSS 是如何在代码里体现的?

虽然 html 是由div ul li 等dom节点组成, 但是你可以将它们YY 成一些抽象的东西.

比如 你可以把一个网页上的 公告栏 看成 一个 人.
这家伙 的名字叫 lilei 于是 就又了 id=”lilei” ,完了 我想起大猫的 李磊与韩妹妹的 H漫了.
这家伙 是人不废话么,于是就了又了 class=”humen”
这家伙 又是蓝种人 , 于是多了一种扩展属性 class=”humen blue-man”

于是 对象div 就生成了

div class="humen blue-man" id="lilei"

根据命名规则修正一下就 变成

div class="panel red-style" id="home-notice-panel"

这样来表现 即可以全局控制panel,又可以部分控制red-style, 还可以单独控制 home-notice-panel

然后说 这家伙 有什么 比如
这家伙 又个头 于是 他多了 div class=”hd” (“原先我喜欢用tit”, 但是yahoo 过分的 只用 hd ,于是我们就妥协了),
头上又什么? 头上写着他的名字丫 不然怎么杀他, 哥可是有死亡笔记加死神之眼滴 ^__^.
对哦 还有个耳环.我把尖括号去掉了,因为要转义,麻烦 应该看得懂吧,看不懂 拉出去 弹jj 10下

div class="humen blue-man" id="lilei"
    div class="hd"
          h2  我是李磊
          span class="more"  耳环

这个时候 突然: 李磊说话了 ” 丫得 我的头圆角的 ” 滚你丫的~~~ 给你写个 radius (css3属性)不就好啦.
无奈,
加了两个耳朵

div class="humen blue-man" id="lilei"
    div class="hd"
          b class="bgl"  b class="bgr"  //学淘宝 用两个b 标签来实现左右圆角,css实现方法有好多.
          h2  我是李磊
          span class="more"  耳环

然后是身体部分.

div class="humen blue-man" id="lilei"
    div class="hd"
         ....
    div class="bd"
         ul  li

李磊说话了: =,= 我叉,我怎么才一条腹肌(li) 而且还是平的,我是那种 8块 腹肌 还有点 古铜的那种
Orz 好吧,给你加上.
ul class="list-mod red-style"
这里的red-style 在ie6下会跟 上面的red-style 有冲突,所以要想一种命名方式避开冲突

好了 让我们 看一下完整的代码:

div class="humen blue-man" id="lilei"
    div class="hd"
          b class="bgl"  b class="bgr"
          h2  我是李磊
          span class="more"  耳环
    div class="bd"
         ul  class="list-mod red-style"
             li

OOCSS的优势在哪里 ?

看了上面的代码 可能你还没了解 oocss 到底好处有哪些.
其实很简单
这个时候如果 你要些一个 韩妹妹 的时候 效果就体现出来了.
你会发现 只要复制上面的代码,然后 修改 一下韩妹妹的特征就 可以了

div class="humen white-man" id="hanmm"   //韩妹妹是白人
    div class="hd"
          //韩妹妹的头是方的,
          h2  我是韩妹妹
          //韩妹妹没有耳环,
          div class="hat" //韩妹妹有个帽子:比如下拉菜单, 可以用id来增强选择器.
    div class="bd"
         ul  //韩妹妹木有 腹肌 =,=
             li
    div class="fd" //韩妹妹有脚~~~~ 难道````李磊木有脚 囧rz~~~~

然后你应该就会发现,这两个东西有很多东西都是相似的.

他们公用了, humen 对象, 共有了 humen hd ,humen bd .
这样的好处是 那天 人类变异了, 头都变长了, 这个时候只要调 humen hd 就能 把 李磊和韩妹妹的头都变长.

再谈谈 对 分离样式的 建议.

适度合理,系统化的分离样式,

分离样式我是推荐的, 但是 我不崇尚过度分离, 类似 开头说的那样是不太可取的.
仔细想想我们平常已经又好多分离样式的存在,
比如 clearfix 就是分离样式 还有类似 grid 都是分离样式
可以根据 功能 来区分
比如 clearfix 是用来清除浮动的, grid 是用来 制造栅格系统的.
比如 我平常 做独立的小页面 时使用的 局域 分离样式

.fl = float:left  .fr  float:right  来实现 浮动.
a.ico span.ico 来实现 图标化, 因为做系统的时候会将一些图标做成 CSS Sprites , 省去了ico 时需要写的 overflow:hidden ,text-indent:-999em 等属性.
.abs = position:absolute 绝对定位
.has-abs = postion: relative 绝对定位的容器.
.sp= margin-bottom:8px; //这个我一般会绑在 对象类的子属性上. 因为不同对象的sp 间隔不一样.

但是我不会写类似 pl4 = padding-left:4px; 这样的 分离样式命名.

好了 说了,这么多仅仅是 分享一下我的心得,有错误 还请指出.

PS: 顺路 关注了一下 css 渲染的东西 , 发现css 的渲染原理 跟之前理解的完全相反
传送门:深入学习浏览器CSS解析原理
我也抽空研究一下, 这个原理 其实对我之前的css 书写有 冲突的.
有兴趣的一起研究一下.

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

先说一下历史背景：
最近看了太多架构式的书，写出来的样式都比较戳。比如: 提交成功的提示框会这么写。

div class = "msg-mod error" //html标签就省略了，自己YY ^__^

所有的信息提示框，用msg-mod 这个通用库来封装。然后 改 通用库包含了一些状态，如：error ，ok ，tip ，notice等来表现“错误，正确，提示，注意”等状态。
于是如果你想写一个输出的正确框就可以写成这样。

div class = "msg-mod ok"

这样做有什么好处呢，

• 1. 首先样式全局化，使用msg-mod 来全局控制，
• 2. 使用非常语义化的状态：error,ok ，来衍生出不同的样式(使用并行结构式方法来实现，后面会解释)。
• 3. 更适合功能的一些特性：有些时候需要使用js 动态的改变msg的样式，这样写出来的js 语义也更强，可读性也增强。

如何实现：

这个应该都清楚。我就一笔带过，贴个代码。

div.msg-mod{  //全局msg-mod 样式，并且有一种初始的样式，使用div开头，增加选择器效率。
    padding:5px 7px;
    border:1px solid #92e577;
    background-color:#eefbed;
}

然后通过结构式定义不同状态的样式，这种将两个class组合起来， 并行定义的样式，我称之为并行结构式

div.msg-mod.error{  //error 状态
    border:1px solid #ff8c40;
    background-color:#fff5e6;
}
div.msg-mod.notice{           //notice 状态
    border:1px solid #ffcc7f;
    background-color:#ffffe5;
}

思维扩展：

这样的表现形式还能接受吧？ 那么我们继续扩展。比如：如果想给一些msg-mod 添加图片来增加视觉效果(如配图^__^)。
要想配图么，于是又给msg-mod 新加了个class属性 has-ico，当然有人会说：默认为什么不给所有msg-mod都配图，给没图的配上属性no-ico，嘎嘎随你~~~，因为后面还有，慢慢看下去就知道了。

div class = "msg-mod has-ico ok"
  h2  提交成功
  p   订单已成功递交，请进入我的订单查看订单状态。

如上面的代码 当有 大字的时候就使用 大的ico图标，当只有小字的时候，使用小ico。(如配图=，=)
于是乎我又添加了个属性 has-sml-ico。

div class = "msg-mod has-sml-ico ok"
  p   订单已成功递交，请进入我的订单查看订单状态。

然后在css样式实现的时候又重现了这个IE6bug，就是IE6下用并行结构式实现不了大小图配置。

分析原因：

经过分析，发现原因是，IE6在解析并行结构式的时候会出现解析错乱现象。比如

div.msg-mod.notice.has-ico{  //notice 有has-ico 的时候显示notice 图标
     background:...
}
div.msg-mod.error.has-ico{  //error  有has-ico 的时候显示error 图标
     background:...
}

这个时候，非IE6情况下，都能够根据css 的结构来显示出想要的结果，但是IE6脑残了，就将其解析成。

div.msg-mod.has-ico{   //忽略了中间的class。
     background:...
}

这样IE6下就以最后一个样式来呈现has-ico的状态。有兴趣可以回家试试，oh yah。

div.msg-mod.error.has-ico{  //error  有has-ico 的时候显示error 图标
     background:...
}

当然有人会说：那把结构式换成 div.msg-mod.has-ico.error试试。
经过尝试，IE6同样会忽略掉中间的class，解析成div.msg-mod.error囧rz~~~~

然后就无解。 ··· 折腾了好久，终于放弃了。然后想了另外的情况来解决。

解决方法：

导致样式错乱的原因初步定位为：3层class 并行结构式会忽略中间的class，(或者说忽略掉第一个也可能，具体我没有深入研究)
解决办法很简单，当然跟解决IE6的其他办法一样，能避开就避开，用其他方式来实现。
于是乎，重新整理了代码思路，整理如下：
既然 并行结构式会导致bug，那么不并行的结构式会有问题么？
我将图片的实现放在子标签h2 上来实现，问题就解决了。如下：

div.msg-mod.error.has-ico h2{
     background:...
}

得出结论，使用非并行结构式样式在IE6下有解。·· oh yah。
不过以上代码还有些bug，这样会对msg-mod 下的所有h2 都增加了图标，于是这样优化了一下。

div.msg-mod.has-ico{
    padding-left:42px;
}
div.msg-mod.has-ico h2.ico{
    margin-left:-37px;
}
div.msg-mod h2.ico{
    padding:7px 5px 10px 37px;
}
div.msg-mod.error h2.ico{
     background:...
}

这样这样实现，通过给msg-mod添加has-ico 属性给内容增加左侧留白(多行的时候)。通过给h2添加ico样式来添加图标。当然单行时候也可以不用加ico，但是根据语义化，还是加上会happy 点。
同样实现小图的时候就 添加 has-sml-ico属性，在标签p上添加ico 样式。代码如下：

div.msg-mod.has-sml-ico{
    padding-left:30px;
}
div.msg-mod.has-sml-ico p.ico{
    margin-left:-25px;
}
div.msg-mod p.ico{
    padding:0 5px 0 20px;
}
div.msg-mod.notice p.ico{
     background:...
}

这样，有效的避免了并行结构式带来的错乱压力~~~~ 万恶的IE6丫~~~~
这样处理有利有弊啦··。
就是必须要在里面的标签上多加一个ico 的样式。

其他目前还没有碰到什么问题。欢迎反馈~~·

您可能还对这些日志感兴趣

• IE6下PNG图片背景不透明的问题
• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析

.target{
    position:absolute; top:10px; left:10px;
}

然后我却发现wave 里的外层布局 div配了 4个

.target{
    position:absolute; top:10px; left:10px; bottom:10px; right:10px;
}

然后像发现新大陆一样去尝试了一下，果然如描述的一样，是一个自适应的div 绝对定位，效果杠杠的。
经过尝试 就是IE6 这个万恶的版本 不吃，其他都吃。
然后再给上面加点属性类似 min-height 就能实现类试软件界面一样的自适应效果。
当然同样IE6 也是不吃的。可以用js 来弥补。
有空我放个demo 上来。
^_^

就这样了， 发篇文章通知一下飞鱼还活着。

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

RT，昨天写一个页面的时候，给一个input加背景图的时候发现的问题。
代码如下：
html部分:

<input class="text" type="text" value="" />

css部分:

#searchBox input.text{
  width:230px;
  height:20px;
  padding:5px 5px 0px;
  border:none;
  background:url(../images/skin.gif) no-repeat 0 -100px;
  font-size:14px;
}

效果图:


经过测试所有浏览器都OK，然后对input进行输入溢出测试(就是输入好多好多字)，就发现了这个问题，看下图，

发现溢出测试对FF，谷歌都ok ，就是该死的IE异变了，通过测试IE6，IE7都有这样的情况(IE8偶米装)

然后为了解决这个问题我绞尽脑浆，针对IE做了如下调整才搞定，不知道有么有更好的方法，有的话分享下呢。
html部分修改(套了个套子):

<span id="searchBoxTxt">
   <input class="text" type="text" value="请输入书名" />
</span>

css部分修改(增加了两个hack样式):

#searchBox #searchBoxTxt{
  *width:230px;
  *padding:0 5px;
  *background:url(../images/skin.gif) no-repeat 0 -100px;
}
  #searchBox input.text{
    *padding:5px 0px 0px;
    *background:none;
  }

经过测试IE下圆满解决，因为使用的是hack法，html部分用的是span，所以对其他浏览器无伤害，
就这样，这个问题暂时告一段落。^_^

补充:

其实 中间我尝试过使用background-attachment:fixed; 但是发现么作用。不知道是真的么有左右还是我使用有问题，
如果background-attachment:fixed 能够解决的话，那上面的代码就可以省了··=.=

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

昨天某小P孩告诉我: 飞鱼~~破啦~~~. 我回答:什么破啦(处女M? =.=) 这撕说:你的页面破了….
汗~~~~
看了下果然破了=.= 是我的页面在IE8下 被破了. 导航上的字下垂~

=.= 因为米有IE8 所以没发现啦. 不过后来去大猫那下了个IEtester 最新版的给补上了.

然后再调试的时候发现N多神奇的东东.

情况如下:
发现IE6,IE7,chrome,FF都正常. 就是IE8下垂了. 哎~~~
然后就上网找找看 有么有IE8 hack 发现了这么张图.点击查看大图

我就囧了, IE8果然比较啜~~~ 米有 针对IE8的hack

但是 经常使用hack 说明你的css 可能不到家.所以就继续研究. 然后发现了还是可以解决问题的.

就是像题目所说的,不同的字体有不同的line-height 这个问题我之前写的时候就发现了.
PS:对line-height 不太了解的请 猛击这里 – 相当好的一篇文章

发现 font-family:Verdana 字体 显示中文的时候 在 不同的浏览器里 有不同的现实效果.
现象如下:
拿font-size:12px; line-height:1.6em 来说吧,

• IE6,IE7 呈现 效果一样
• FF chrome 呈现 下垂1px 左右.(可以用hack来解决)
• IE 8 下垂 2px 左右 (暂时米办法=.=)

然后继续研究, 因为之前 试验过 用 “宋体” 发现呈现都一样. 于是将 font-family:simsun (飞鱼:simsun 是 宋体的意思. 以前我直接写”宋体”,后来出现ie6 不识别的问题就么用过了. )
PS: 其实我发现simsun 在”喂死它”Vista 下显示 是雅黑, 如果你用”宋体”的话,在Vista 下 显示是宋体, 大概simsun 有点类似 系统默认中文字的感觉

果然,将font-family改成 simsun 问题就解决了~~` 可爱的IE8不下垂了,呈现状况如下.

• IE6 呈现上翘1px.(基本可以无视,或者用hack来消灭)
• IE7 FF chrome IE8呈现 效果一样

所以得出结果.在做类似menu类的 精确到像素布局的, 然后又显示是中文的,建议将font-family改成 simsun 就能解决此类下垂问题.

好了希望碰到此问题的csser 了解.

PS:当然我这个东东只是 个人试验结果. 应该还有 更好的办法吧. 如果你有的话, 那么 请留言分享吧^_^

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

关于本学期退补选的紧急通知

作者：系统管理员
各位同学：
数字化部教务系统近期升级后，出现与ie浏览器7.0版本不兼容的问题，导致使用ie 7.0的同学无法
在网上进行退补选(网上选课下拉菜单不能显示)，数字化部正在协调处理。请不能进行退补选的同学换
用ie浏览器6.0版本的机器进行退补选操作，也可到教务处指定机房退补选（机房全部安装ie6.0)。
特此通知！
教务处
2009.2.23

是很强大，网上选课下拉菜单不能显示 应该是个js 问题，排查应该会很快，而且应当说ie7对js的支持更佳，唯一的解释是，css代码错误，或者是js 调用出错。

只怪，现在大学里都没开前端的课程，咱们学校(也是电子类)貌似还在教table，js之类的更是升华到了java级别。殊不知js跟java是远亲关系，虽然都是同个妈生的。

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

某《男人志》的壁纸(时间貌似不对)
刚过情人节, 该表白的的表白，该open room 的open 。
向所有的情人们表示飞鱼最顶级的祝福.^_^ orz 。。。。

好了返回正题

这个问题 其实蛮早前就知道了呢，就是发现目前好多的1.LCD显示器偏亮，而笔记本的LCD显示偏暗。什么情况呢，我细细道来。
经过实践证实，现今好多LCD厂商生产出来的屏幕都在 炫耀 他们的 黑白对比度，绚丽屏啊什么的，但是个人感觉都偏亮，怎么个偏亮呢。
我下面给出个例子

如上表:是#ffffff 到#cccccc 的灰度色表,步进为2位, 我的显示器在sRGB模式下能看清楚#f7f7f7, 但是我在有些朋友的液晶显示器上却看不到.飞鱼:比如我的blog的背景色是#f1f1f1. 在朋友的显示器上完全是一片白色. 根本分不出灰度, 不管是用户模式,9300,6500,还是sRGB.
而且测试发现, 绝大多数(70%左右)的显示器都有这样的情况. 大家都觉得白白的没感觉.不知道是不是LCD显示器本身的问题,还是制作工艺的问题.

同样的事情,在本本上刚好相反. 似乎本本的屏幕质地不同, 显示偏暗,显示灰度,上表竟然神奇的都区分开了,但是有点区别就是灰度都偏暗. 很囧的一个结果.

总结:
我不太清楚到底是 用户显示器 没设置好,还是 普遍有这样的情况. 这样的话 对设计网页的时候 会带来很大的障碍, 灰度出现差别,同样会在其他色域出现区别. 太亮了让别人觉得没什么效果. 太暗了 会觉得 像斑马“`(特别是那种条纹表格.=.=)

PS:大伙有兴趣可以帮忙看看, 留个言: 我统计一下 都能看到哪一级 这关系到设计师的前途丫“嘿嘿

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

如何让 你的 “少女” 婀娜多姿呢?

• 充分利用html 权重性标签, 如 h 标题, p 段落 , ul 列表 等. 我的习惯是 h1当前页面的总概括(这个是看浏览国外网站时总结的). h2 用在组件标题, 类目标题. 以及内容页面标题上. h3 可以用在 组件内的内容标题,如:推荐文章, 还可以用在内容页面的内标题上, p 大多用在 推荐文章的简短描述上, 以及内容页面的段落; ul 相信大家都会用 就是 文章列表, 当然, 内容页面内 也可以用,可以方便提高阅读. 其他如em strong 等强调性的标签,可以根据需要来设置,以上是层次的一种表现方式.这样的话 页面 会被 字体大小等字体样式 区别开来.提高移动设备的用户体验.
• 调整html内容的显示顺序, 这点是比较重要的, 当你试用移动设备 来查看 网站的时候,一大堆垃圾信息让你翻得死去活来,才到主要内容的时候,相信你第二次就不会再回来了. 所以显示html的顺序 是要 做调整的. 就简单的拿blog来说吧: 尽量让文章内容的post显示在前,sidebar显示再后,这样用户就能看到你的最新更新了.
• 优化代码,使页面更加语义化. 就是让你的网页 没穿衣服像穿这衣服一样^_^.如下图,比如最后附图一样. 自己看图去,嘿嘿. 我就不解释了
• 不要太依赖列表标签li,记得刚学css那会儿05年,看大伙都满屏的li来li去.以为li 才是css. 后来慢慢才知道,其实不是一定要用li 有的时候 你用table 会更 清爽, 比如类似于 小型nav(导航) 完全只用文本链接来 实现 反而效果好. 因为li 有的时候挺变态的,让它躺好它偏偏撅起来,囧死.
• 尝试使用语义化的标签,就像h 代表标题一样 p 代表段落 strong代表加粗一样, 未来的即将要出来的html5 将有更多的语义化的标签. 这些标签,能从不同程度上 提高页面的浏览易读性. 并且对SEO. 还有人品值(PR值,PageRank.我喜欢反过来读^_^)有帮助

好了打完收工. 将图贴上
附图1

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative