如何解决无"width、float"的DIV的margin问题?

最新推荐文章于 2022-10-22 00:48:12 发布

最新推荐文章于 2022-10-22 00:48:12 发布 · 159 阅读

文章标签：

#XHTML #CSS #HTML #浏览器

疑惑中...... 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了多个默认宽度的DIV元素，在未设置浮动的情况下，即使指定了margin值，但在不同浏览器中显示效果不一致的问题。期待专家解答。

经常遇到这种情况，如以下这段代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.Box { border:8px solid #E3F7FE; background:#fff; padding-bottom:30px; }
.tijiao { text-align:center; font-size:16px; font-weight:bold; color:#FE6703; margin:20px 0; }
.tijiaosm { text-align:center; font-size:13px; line-height:23px; margin:20px 0;}
-->
</style>
</head>

<body>
<DIV class=Box>
  <DIV class=tijiao>已经提交审核，大约3分钟即可完成发布，请耐心等待...</DIV>
  <DIV class=tijiaosm>
  感谢您，请注意查收您的邮箱，以得到及时回复。<br />
  欢迎在此<a href="">登录</a>或<a href="">注册</a>。</DIV>
  <DIV class=tijiaosm>
  <a href="">删除</a> | <a href="">添加到收藏夹</a> | <a href="">查看积分</a>  </DIV>
</DIV>
</body>
</html>

几个默认width的DIV在未设定float的情况下，排列时明明设定了各自的margin值，但是在各浏览器中的显示结果并未实现有准确的MARGIN值，这是什么原因呢？

期待达人给个指点。谢谢！