.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 上来。
^_^

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

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

• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height
• 此学校在退化

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 能够解决的话，那上面的代码就可以省了··=.=

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 怨念体 – 不同的字体有不同的line-height
• 此学校在退化

昨天某小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:当然我这个东东只是 个人试验结果. 应该还有 更好的办法吧. 如果你有的话, 那么 请留言分享吧^_^

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 此学校在退化

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

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

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

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

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

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• js跨域问题

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

好了返回正题

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

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

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

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

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

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 从UI到UED – 阿里日文站
• 异变: input的背景background

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

• 充分利用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

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height

想玩转css 就得先玩好cs(counter-strike)到超人(superman)的境界.
飞鱼:以上纯属扯蛋,我也就会玩点cs,不过还没到超人境界,也不说玩转,只能说是浅谈哈哈.

好了归入正题.

这几天在52css上看了几篇好文章. 蠢蠢欲动.
也分享一下我的一些css经验.

首先从52css上的六个CSS习惯讲起.

一.关于命名

很多人对命名很感冒,不知道怎么命名,我也是,但是我知道 一个好的css命名,可以增加 xhtml的可读性. 这就是 CSS也要语义化. 很多人,会在div 上下加上注释,以提高阅读性, 我觉得 好的css命名 可以不需要注释, 当然 在样式表内 请做好 注释 以提高 查找.

原先我一直都用class_name 下划线方式来命名.后来听说js 在获取class名时会出现,找不到带下划线class. 后来看了一篇文章div css布局命名时尽量避免下划线,后来就开始尝试用 驼峰式(className)和减号(-)做分隔(class-name).
飞鱼:某男说不知道驼峰式是啥东西, 就像骆驼背上的峰一样有起伏,比如:headLogo. head和logo是两个词汇,如果都用小写可能会混淆词义,所以每个词的首字母大写来提高识别率,当然,会有人问,第一个字母为什么不大写, 这个…. 都大写 就成地名了,这是我的理解哈哈…^_^
当然 为了区分 class 和 id 命名方式最好也区分开, 不然当出现 class名跟id 名一样的时候 会搞不灵清.

我的命名规范是:
class 用 驼峰式 (className)
id 用 减号(-)做分隔 (class-name)

这点 跟 上面52css那几点习惯的第一点刚好相反, 这个看个人习惯吧. 差不多.

关于命名还有一点就是尽量避免 常用词单用. 如: title, content, more ; 可以用 .header .title 等层叠(Cascading)来写.这样就不会冲突了.

常用的命名: 这个我有空整理一下我自己的命名,放出来.

二.关于class和id的取舍

貌似, 52css上说的也不太人性化, 样式都用class而不用id, 有class 有 id 总有它的可取之处.
记得最近的 漫谈前端开发中的团队合作 里说到的 面向对象.
网页html 和css 也是可以 组件化的.
class就像OOP(面向对象思想) 的类一样,可以重用,并且继承.
比如: blog 侧边栏组件 用.panel 类命名.
然后利用id 的优先级和 唯一性, 如用#panel-category来定义 分类panel的 特定部分.
如 CSS也要语义化 下面部分的代码段(class为mode那段).
他的代码思想跟我不谋而合, 就是把网页上的区块组件化. 给个通用class名.mode 以及唯一的id名#index_news.
该组件有几个固定的class 如:title content bottom more 等. 这样做的好处是一,代码规范,第二能够很轻松的代码重用.
可能有人会问: 这样怎么体现代码的优势. 这么说吧,如果写完一个组件后要写另外一个组件,的时候,只要ctrl+c这段代码,然后修改class和id是不是就搞定啦.. 这样可以很大提高效率,而且使代码也变得很整洁

三.关于样式的书写顺序,以及优化

发现 很少人 讨论 书写顺序, 虽然不太必要, 但很容易被忽视.
如:a 的 伪类一样 一定要遵循lvha(:link,:visited,:hover,:active)的顺序一样
当然样式里同样有顺序 会让样式更加规范.
我一般都是 以下面的顺序来的.
1.位置 float display margin padding
2.大小 width height
3.背景 background
4.字体 font

还有就是记得缩进,看一个人的代码功底,很大一部分是看命名跟缩进.

四.关于编辑器

我的使用编辑器之路是: 记事本(notepade) – DreamWeaver – 小记事本(notepad++)
DW适合初学者, 代码提示 会给你很大的帮助, notepad++也不错,我比较喜欢他的配色,以及打开速度,不过没有项目管理功能,还是比较麻烦的.

今天就到这里了. 等想到一点在说.

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height

解决办法

个人感觉 网页快照 的前端是否要 制定相应的兼容 程序，因为网页过滤后，再外层包一些搜索引擎的代码，必然会产生破相。但做到不破相也不是不可能，也许目前 搜索引擎的前端 都没发现这问题吧，又也许 这工程 貌似有点大，不再档期内。

PS:反正肯定不是咱们这些小前端的事情。再把快照的兼容考虑进去，那直接自杀算了。=.=
PS2: 貌似 IE 是个大bug, FF 的网页快照 破得不是那么凄惨，IE上就直接缺胳膊少腿的，吓人。
不过 小站 在除了IE以外 浏览器下的快照 非常之正常。开心一下。

阿弥陀佛 阿门～～ 真主保佑。。。

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height

顺便转个 Firebug Lite 使用简单使用方法，教育后人。
还是挺好用滴··，我用的是书签法。
原先以为载入js会很慢，但发现第二次后就比较快了··· 又是缓存问题，估计我脑子被门挤了，囧rz

Firebug Lite使用在IE、Opera、Safari浏览器

Firebug Lite 源自 Firebug ，可使用在IE、Opera、Safari 浏览器上。最新版本为 Firebug Lite 1.2 ，不仅包含了旧版本的console.log 命令，还可查看 DOM 元素、跟踪 XHRs，操纵 HTML、 CSS 和 JavaScript 。

Firebug Lite 可以在页面中插入调试：

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

还可以创建 Firebug Lite 书签调试（推荐）：
javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

当然你也可以将文件下载到本地调试。

更多介绍请看：http://getfirebug.com/lite.html

原文地址

PS:最后附赠囧图一张···

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height

上面说的那个 国外的站就 是960 grid systems 貌似非常经典。
先跑开题分析以下 它的960 grid systems
该国外网站上有这么个介绍页面，个人感觉比较人性化地表现了 960 grid systems 链接在此
该介绍页面 介绍了 n =12 以及n =16 两种经典方案。
看完这两个方案发现两点：
第一点. A：i 分别等于3：1 和2：1。且都是十位取整，显然符合我的思想，计算简单。
第二点. 两边都有10px 的留白。这是淘宝ued那篇文章所没提及的，也就是说 A×n -i = W 中的W实际上是940。
通过以上两点 可以产生衍生思想，通过第一点的比例，可以推算，是否还可以使用其他比例,如4：1或者1：1。 通过第二点 可以推算，既然两边加入了留白，是否应该在 A×n -i = W 新增加一个参数，或者 产生一种更灵活的计算办法。

未完待续。。。

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

• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height