IE8下CSS写法的几点心得

html-css013

IE8下CSS写法的几点心得,第1张

width:192px

height:55px

margin-top:100px

background:url(images/anniu01.gif)

no-repeat

left

bottom

要将上面的改成

width:192px

height:155px

background:url(images/anniu01.gif)

no-repeat

left

50px

2.尽量用padding-top:,少用margin-top

今天总算升级到IE8了,感觉CSS的写法要想同时适应IE6、IE7、IE8、FireFox,有以下几个基本的窍门。

1、使用float后必须clear,否则IE8显示错误。

2、h1,h2,h3,ul,li,dl,dt,dd,p...最好定义margin:0和padding:0,否则各种浏览器显示有误差。

3、line-height值最好是偶数,奇数显示有误差。

4、input

的text和password两种形式在IE8不定义字体(宋体)下长度高度不一样,可将input定义为font-family:Arial。

5、如果想在标题前后加小图标,最好不要直接用img,用img的话IE6行间距会缩小,应该用<li>加背景的形式。

...今天暂时只发现这几点,更多的以后继续总结。

实在不行再用分开定义的办法:

div

{

margin:0

/*

给全部浏览器看

*/

*margin:10px

/*

给IE6、IE7看

*/

_margin:20px

/*

只给IE6看

*/

}

附:基本CSS样式表

<style

type="text/css">

body

{

margin:0

font-size:9pt

line-height:18px

}

h1,h2,h3,ul,li,dl,dt,dd,p

{

margin:0

padding:0

}

ul

{

list-style:none

}

form

{

margin:0

}

input,textarea,select

{

font-family:Arial

font-size:9pt

}

.clear

{

clear:both

}

</style>

给你几个比较重要的建议把

1、用Dreamweaver布局的时候,预览模式只能做部分参考或者不做参考,最终还是以浏览器显示为依据,因为Dreamweaver的预览模式的纠错能力差,或者说是兼容性不行

2、尽量把各个样式代码的名称记住,因为Dreamweaver有代码提示功能,所以也不用一字不落的全记住,但至少你得记住代码的大概拼写或者打头字母,这样能有效的帮你找到样式,这一条建议是比较适合初学者,记住代码能让你更快速更有效的布局

3、多看一看人家的成品页面,能让你快速的学习,但是当你能够基本熟悉后,想要有所进步看别人的效果就不那么明显了,最好就是自己多做,然后碰到问题解决问题,解决问题的过程就是学习的过程,我经常在百度这里帮人解决css方面的问题,经常能碰到一些我没碰到的问题,这就能让我在解决这个问题当中又学到一些东西,此外我教你一个更快速看别人页面样式的方法,那就是firefox火狐浏览器有一个firebug插件,按下快捷键F12就可以查看你所看到的页面的页面布局以及css样式,360浏览器也可以用

4、最好是能买一本专业的div+css布局的基础教程的书学习,因为我们在网上所学到的都比较的凌乱,看书学基础的话会比较的扎实,虽然可能会多花一点点时间,但是对于以后的发展是有好处的