61,112
社区成员
发帖
与我相关
我的任务
分享div 位置的奇怪问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style type="text/css">
<!--
body,div{ margin:0; padding:0;}
.u0 {
left:47px;
top:47px;
width:300px;
height:200px;
position:absolute;
background-color: #CCCC99;
z-index:2;
}
.u1 {
left:47px;
top:314px;
width:300px;
height:200px;
position:absolute;
background-color: #CCCC99;
z-index:2;
}
-->
</style>
</head>
<body>
<div id="u0" class="u0"/>
<div id="u1" class="u1"/>
</body>
</html>
两个div 的left 都是47px;，，但在浏览器里面看到的效果，居然靠左边的都不对齐，什么回事？
但在dreamware设计里面，确实正常的。
高手，指导下，谢谢
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style type="text/css">
<!--
body,div{ margin:0; padding:0;}
.u0 {
left:47px;
top:47px;
width:300px;
height:200px;
position:absolute;
background-color: #CCCC99;
z-index:2;
}
.u1 {
left:47px;
top:314px;
width:300px;
height:200px;
position:absolute;
background-color: #CCCC99;
z-index:2;
}
-->
</style>
</head>
<body>
<div id="u0" class="u0"/>
<div id="u1" class="u1"/>
</body>
</html>
两个div 的left 都是47px;，，但在浏览器里面看到的效果，居然靠左边的都不对齐，什么回事？
但在dreamware设计里面，确实正常的。
高手，指导下，谢谢
...全文
请发表友善的回复…
发表回复
人生难得一只鸡 2014-05-23
- 打赏
- 举报
<div id="u0" class="u0"></div> 这种才是标准的写法
也许你会看到表单元素会有类似的 这种写法<input type="text" />
如果div 写成下面那样，通过开发者人员工具，你会发现，渲染结构就乱掉了，u1变成了u0的子节点，又因为两者定位问题，那么u1便是基于u0定位
哈还是前端规范问题
vincentguo_ 2014-05-23
- 打赏
- 举报
没仔细研究，就是复制到我编辑器后，编辑器识别为标签配对有问题，所以我就改了下
注释看了下没影响
标签问题，编辑器里看时这样，所以我就变成标准的标签闭合写法
demo大师粉丝 2014-05-23
- 打赏
- 举报
真的是这样，
但不懂，请教下
<div id="u1" class="u1"/>
和<div id="u0" class="u0"></div> 不是一样的吗？
还有
多<!-- --> 为什么就不行了？
vincentguo_ 2014-05-23
- 打赏
- 举报
<div id="u0" class="u0"/>
<div id="u1" class="u1"/>
变成
<div id="u0" class="u0"></div>
<div id="u1" class="u1"></div>
vincentguo_ 2014-05-23
- 打赏
- 举报
把style里的这个干掉 <!-- -->
