若干IEbug及解决方案

这篇东西写了很久,大概半个月了,开始想详尽的写完所有的IEbug,但是要回家了,暂时先把这些放出来吧。写的过程参考了很多文章,比以前明白了很多东西,也发现了很多不知道的问题,如果您看完了,发现任何错误疑点、任何意见观点可以评论或者发邮件给我。

命中注定总有一个浏览器作为复仇女神来到世界各地的开发者中,在web标准运动初期,这个角色是Netscape Navigator 4,垂死挣扎就是不肯死去,阻碍着现代标准的进程;今天这个角色被Internet Explorer 6这位邪恶的坏同学代替了。——Jeremy Keith

Read more

在IE主流时代诗意地编码(四)

工具集

Modernizr

如果你使用高级CSS属性,Modernizr 将是一个非常有用小型JavaScript。它为你的页面html标签添加一些类(class),来测试浏览器是否支持一些特定的CSS属性,像:
Read more

在IE主流时代诗意地编码(二)

重置(浏览器默认属性)

如你所知,所以的浏览器对各种html元素都具有不同的默认属性。这是为什么使用重置样式文件(Reset style sheet)是一个明智选择,这样我们就可以在“一张白纸”(去掉了众多浏览器默认属性,可以让你自己的属性更好的工作)上面开始工作了。

众多充斥互联网的重置样式文件各有优劣。Eric Meyer的重置文件被广泛的认为标准并被经常使用,还有其他一些演化的版本。(如果不能看到这个页面,可以直接下载这个文件css-reset.txt)


Read more

在IE主流时代诗意地编码(一)

大家都在抱怨为什么我们不用更多的CSS3和其他一些灵活而有潜力的辅助技术,但是我们仍然需要考虑IE6和其他烦人的浏览器。

我们在实际开发过程中是怎么做的呢?在开发网站中我们怎样做到即利用最新的编码技术又可以保证Internet Explorer的用户的正常访问呢?

在这篇文章中,我们将见到既可以保证IE用户良好的用户体验又可以保证技术前进的措施。我们将集中在CSS部分,但是会提供一些处理其他问题(overall markup)的小技巧。

可以斟酌我们之前的文字:

Read more

CSS选择符之二子对象选择符

子对象选择符以所给元素的直属子对象为目标。例如,它使你能够格式化列表的直属子对象中的链接,以区别其他的链接。子对象选择符由两个或更多的一”>”连接符分隔的选择符组成。

提示? -_- -!连接符(Combinator)分隔组合选择符中的两个或更多个选择符。可用的连接符包括空格,> ,+,逗号,分号。(当然都是半角咯#_#)

下面的例子规则将设置所有属于<div>元素子对象的链接的样式:

div > a {

text-indent: 200px;

}

这个规则仅影响那些直属于<div>元素的子对象(不是其他自对象的子对象)<a>元素。如果其他元素出现在<div>和链接之间——例如<ul>元素——选择符将不会与之匹配,text-indent格式也会失效。

<div>

<a href=”http://www.5ivedanc.com”>yunsi me</a>

<ul><li><a href=”http://www.5ivedanc.com”>yunsi me</a></li></ul>

</div>

超越CSS原则

  1. 不同的浏览器都显示不同的设计。
  2. 应用所有可用的CSS选择符。
  3. 使用CSS3尽可能地展望未来。
  4. 运用JavaScript和DOM来弥补CSS的不足。
  5. 避免运用Hacks和滤镜。
  6. 使用富有语义的命名规范和微格式。
  7. 分享你的想法,与他人协作。

摘自《超越CSS》P22

CSS实现的标题过长省略方法

传说这样的好处是提供给搜索引擎的是完整的标题描述,利于seo的。我连博客的永久链接都懒得写缩略名,对这个的作用就更不想纠葛了,不过这样的代码写写更健康,很屌很强大,一堆hacks,折磨死你。关于php留言本的问题我想找人杀了算了,伤了我N个脑细胞了,可是还是undefined。 不想说什么了,难道要拖到这次回家都不能做成功吗,不要啊。

<style type=”text/css”>
<!–
li {
 width:20px;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 overflow: hidden;
 } 
/* firefox only */
  li:not(p) { /* wtf is? pls let me know*/
   clear: both;
   }
  li:not(p) a {
   max-width: 17px;
   float: left;
   }
  li:not(p):after {
   content: “…”;
   float: left;
   width: 25px;
   padding-left: 5px;
   color: #df3a0e;
   }–>
</style>
<ul>
<li><a href=”http://www.5ivedance.com” mce_href=”http://www.5ivedance.com” titile=”这是一句很长很长的话很长所以需要截断截断有很多方法,可是这样做传说利于SEO,我不用网站赚钱对SEO不感兴趣,可是这样做是一种技术,所以…”>这是一句很长很长的话很长所以需要截断截断有很多方法,可是这样做传说利于SEO,我不用网站赚钱对SEO不感兴趣,可是这样做是一种技术,所以…</a></li>
</ul>