网页制作注意事项

Css万能hack(顺序不可变):

color:#000000; *color:#00ff00;_color:#ff00000

ff/op/saf/chrome/ie8; ie7; ie6

Png图片ie6的兼容问题

• Png很棒！完美的透明图支持让我们锤炼三尺。

可是，ie6很罪恶，顽固的不支持让我们无可奈何。

•修复过的Png在ie6下会有什么变态的事情发生？

1.Png做为背景，使链接失效

2.Png图片存在于带滚动条的区域，无法跟随滚动条滚动

3.含有png图片的元素不能用png做背景

4.。。。。。。

5. •解决办法：

1.需要做背景的时候，使用绝对定位分层的办法

2.将png图片做成swf，设置flash透明

3.<img src=“*.png” style=“width:100px;height:50px”/> png图片的宽和高一定要写在img的style里，否则可能导致修复无效

4.如果大家有完美的解决方案，请分享给大家，无比感谢！

绝对定位兼容性

•Ie与firefox对绝对定位有不同的理解：无论是定位的位置还是z-index的相对关系，还是在父级元素定义text-align：center的时候，每个浏览器都坚持了自己的个性。

•解决方案：

–hack吧，无可奈何的选择

–尽量不要让父级元素的text-align为center；

Margin与padding

•设置了margin，并浮动，在ie6里会有bug

•设置了margin，在firefox中会莫名其妙的有各种诡异的现象发生

•。。。

•所以，能用padding，就不用margin，别给自己找麻烦。。

Li列表浮动定义高度，ie6浮动失效bug

•这是一个诡异的事情，我已经不知道怎么从逻辑上来解释（事实上大多数问题都没法用逻辑来解释。。）

•解决方法：去掉height，改用line-height。

权益之计，等待高手们找到更好的办法。。。

Hack最少化原则

•做网页这个行当，啥人会被称之为“神人”？Hack：经验的象征！能写出各种匪夷所思的hack代码，让程序员深感羡慕的人，很牛！

•但是，我的建议是尽量少用hack！

兼容问题的产生，绝大部分是写出的css有歧义。把自己先当作浏览器，来阅读自己写的css，看会不会得到不同的理解。

•所以，我们写css要像律师说话：严谨，没有歧义，没有误会就没有bug，不要抱怨浏览器，先审视自己。。。

Javascript兼容性考虑

•Ie、firefox、safri到底对javascript支持有什么不同？？嗯。。。一言难尽啊。。。

•解决方法：使用jquery框架，花不了多长时间的学习，你就会发现，自己已经有了质变。。

扩充性考虑

•高度自适应

•缩略图最大宽高

•固定背景区域自动滚动条