标签归档:css

[温故而知新]再谈IE中li之间高度空隙的问题

时隔两年之后,再次碰到IE6、IE7下li高度占用的bug,2008年的文章在这里

之前的老办法还是能解决问题的,然后顺便研究了一下。

首先是症状的发生条件:

  • 1、IE6、IE7
  • 2、li内嵌其他容器,不仅限于超链接,我测试过span等也有此问题
  • 3、高度低于某个值,这个值我没有严格测试过,但是我把li的高度设置成30px的时候没问题,18px的时候就有问题

问题解决办法:

  • 1、给li附加样式

    li.classname {
    float: left;
    width: 100%;
    }
  • 2、将li设置成inline,给内嵌容器设置宽度

    li.classname {
    height: 18px;
    line-height: 18px;
    display:inline;
    }
    li.classname a {
    display: block;
    width: 100%;
    }

长期招聘Java/PHP/WebDev工程师

到处打广告,长期招聘Java/PHP/WebDev民工

我们的网站:http://www.lehecai.com

应聘请投递简历到:sunshow@gmail.com,注明应聘职位

我们的要求(部分满足即可):

Java

  • 熟悉Struts2 + Spring + Hibernate
  • 熟悉数据抓取
  • 了解或熟悉多线程的工作方式
  • 有数据分析相关经验,有jfreechart等图表经验尤佳

PHP

  • 熟悉MVC
  • 熟悉MemCached
  • 熟悉smarty等模板技术

WebDev

  • 熟练使用jQuery
  • 精通CSS和基于XHTML+CSS的布局方式

CSS Sprites样式生成工具

推荐一个CSS Sprites样式生成工具
作者主页:http://www.cssforest.org/blog/index.php?id=129

这是一个基于Adobe AIR的工具,需要下载AIR运行时

使用效果图:
css_sprite

操作说明:
载入图片后,双击新增一个区域,设置每个区域的类名等属性,最后可以导出css列表
更多说明可以参考主页内容

应用新主题

跟以前主题的比较:

1、全新的结构,基于hybrid
2、960px定宽
3、侧边栏大变样,其中最近评论加上了头像显示
4、支持Widget
5、面包屑导航

Todo:
正文部分和评论部分的CSS设计 done
不同页面拥有不同内容的侧边栏
制作Links页面 done
还有很多遗漏的地方

鸣谢:
Becomin’ Charles:我从这里得到了很多hybrid方面的帮助
NeoEase:我在这里剽窃了一些样式,囧

有时候注释也不能乱写

让我们看看这个很简单的例子:







尝试分别在各种浏览器下运行它:






在大多数情况下,我们得到了正确的预期中的结果,如下图所示:
大多数浏览器下的执行效果

但是不要忘了神一般的IE6,OMG,发生了什么:
IE6下的运行效果

经过我一个像素一个像素的测量,发现当其中一个div减少3px的时候,在IE6下就能并排显示
这个数值很容易让人想到The IE6 Three Pixel Gap,但也不是这个问题,真正的原因在于那句注释,将注释去掉就能在IE6下也得到正确的结果

有时候嵌套过多时,我们为了方便地找到嵌套的首位,会比较习惯于在开始和结束的地方加上注释,这时候如果碰到float就要慎重了,我测试了将注释换行或者加上空行分隔,都不能解决此问题

再次呼吁抛弃IE6!

另外还有css和js文件的注释,最好写英文注释,当然最好的习惯是将所有文件保存为统一编码
我碰到的几次问题是utf8的html引入编码为ansi的js文件,结果由于字符集的问题导致js中的单行(即//开头的注释)中文注释不能正确断行,导致下一行本应执行的语句被注释掉,由此可以推出一个好的编码习惯,即在单行注释末尾也加分号