Web Design – HTML5 & CSS3 Checklist

Web Design – HTML5 & CSS3 Checklist

Read more

若干IEbug及解决方案

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

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

Read more

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

工具集

Modernizr

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

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

CSS 主要的区别是外观层面的

这将面临的问题是最好不管那些不支持(新技术的)的浏览器,因为即便缺乏支持对用户浏览内容毫无影响。

这样主要会用到一些新CSS3属性,比如 border-radius, text-shadow 还有border-image。

Border-radius

这是设计师在不考虑IE以为学习到的第一个CSS3属性,因为它明确的美化属性。用border-radius的时候,最好不要试图在IE里复制相同的效果,让它随意吧。
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

Shining Ghibli

shining-ghibli

折腾了个Tab.折腾一晚上- -,又改样式玩,最后又加了Ghibli V1.0…-.,-!  以下-源:

shiningghibli.css
shiningghibli.js

ShiningGhibli -Tab(Demo)

IE6中float:right换行问题\代码公用的一点儿XX

demo

Read more

声明缩写以及淘宝面试题

p { font: style variant weight size/line-height family ;}

p { font:italic small-caps bold 12px/150% verdana,arial,sans-serif ;}

background: #f3f3f3 url(lalalal.gif) right top no-repeat ;

[ LoVe HAte ]

a:link {}

a:vistited {}

a:hover {}

a:active {}

善于clear:right/left ; 返回自然元素流。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<style type=”text/css”>
<!–
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
–>
</style>
<div><p><img src=”http://www.google.com/intl/en/images/logo.gif” /></p></div>

Entomology(居中)

组合使用自动外边距和文本对齐

这始终是个hack(为兼容地域IE6的浏览器),无论如何也算不上完美。

body {

text-align: center;

}

#container {

margin-left: auto;

margin-right: auto;

width:200px;

text-align:left;

}

负外边距解决方案

Entomology用到的代码:

#container{

background: #ffc;

position: absolute;

left: 50%;

width: 760px;

margin-left: -380px;

}

没任何hack!适用性极广——Netscape 4.x中都没问题,不是首选,但是想得到广泛浏览器支持,这是最好的选择。

Page 1 of 212