IE与FF中的HTML DIV和IMG标签间距

IE与FF中的HTML DIV和IMG标签间距,第1张

概述我在简单的 HTML页面布局方面遇到了麻烦.请帮忙. 这是我要去的布局…… Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif >橙色=身体 > blue / red = frame div > green =标题图片 >黑/白=菜单div 它在Internet Explorer中看起来是正确的,但在Firefox,Safari 我在简单的 HTML页面布局方面遇到了麻烦.请帮忙.

这是我要去的布局……

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> &nbsp;|&nbsp;                <a href="two.HTML">Two</a> &nbsp;|&nbsp;                <a href="three.HTML">Three</a> &nbsp;|&nbsp;                <a href="four.HTML">Four</a> &nbsp;|&nbsp;                <a href="five.HTML">Five</a> &nbsp;|&nbsp;                <a href="six.HTML">Six</a> &nbsp;|&nbsp;                <a href="seven.HTML">Seven</a> &nbsp;|&nbsp;                <a href="eight.HTML">Eight</a> &nbsp;|&nbsp;                <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标签间距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1075099.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存