这是我要去的布局……
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif
>橙色=身体
> blue / red = frame div
> green =标题图片
>黑/白=菜单div
它在Internet Explorer中看起来是正确的,但在firefox,Safari和Chrome中,我的图像(标题)和我的div(菜单)之间有4个像素的间隙.
Internet Explorer,firefox,Safari和Chrome ……
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif
这是我的HTML …
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><HTML> ... <body> <div ID="frame"> <img ID="header" src="images/header.jpg" wIDth="700" height="245" alt="" /><div ID="menu"> <strong>One</strong> | <a href="two.HTML">Two</a> | <a href="three.HTML">Three</a> | <a href="four.HTML">Four</a> | <a href="five.HTML">Five</a> | <a href="six.HTML">Six</a> | <a href="seven.HTML">Seven</a> | <a href="eight.HTML">Eight</a> | <a href="nine.HTML">Nine</a> </div> <div ID="content"> ... </div> ... </body></HTML>
请注意,img和菜单div之间没有空格.
这是我的CSS …
...div#frame { background: #FF0000; margin-right: auto; margin-left: auto; wIDth: 700px; border: 5px #30AADE solID;}div#frame img#header { margin: 0; padding: 0; border: 0;}div#frame div#menu { margin: 0 auto 0 auto; padding: 5px 0 5px 0; border-top: solID 2px #FFFFFF; text-align: center; Font-size: small; color: #88BE34; background-color: #000000;}div#frame div#menu strong { Font-size: medium; color: #FFFFFF;}div#frame div#menu a { color: #88BE34;}
为什么firefox,Safari和Chrome显示4像素差距?
解决方法 它与img标签的默认规则有关.我建议您始终在样式表中使用此作为默认规则:
img{ display:block;}总结
以上是内存溢出为你收集整理的IE与FF中的HTML DIV和IMG标签间距全部内容,希望文章能够帮你解决IE与FF中的HTML DIV和IMG标签间距所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)