一、页面例子
- .demo-outer {
- border: 3px dashed black;
- /*这项样式属性可以同时指定三种不同的元素边框属性
- border-color,border-width,border-style*/
- padding: 8px;/*这项样式属性定义元素上、右、下、左的内缘宽度*/
- }
- .demo-inner {
- border: 3px solid black;
- padding: 0 8px 8px 8px;
- }
- .demo1 {
- border: 1px solid black;
- margin-top: 8px;
- }
- .demo2 {
- border: 1px solid blue;
- margin-top: -1px;
- }
- .demo-outer p {
- margin-bottom: 0;
- }
- <div class="demo-outer">
- <div class="demo-inner">
- <div class="demo1">
- This is a <div> with a border and a positive top margin.
- </div>
- <div class="demo2">
- This is a <div> with a border and a negative top margin.
- </div>
- <div class="demo1">
- This is a <div> with a border and a positive top margin.
- </div>
- <div class="demo2">
- This is a <div> with a border and a negative top margin.
- </div>
- </div>
- <p>This is a <p> that does <strong>not</strong> have a border.</p>
- </div>
二、分析解决
-
有两个连接的块级元素,第二个设置了负的margin-top或margin-bottom,并设置了border,则显示不正确。
-
解决方法:给相应窗口及元素设置hasLayout属性。
三、修改后的源码
- .demo-outer {
- border: 3px dashed black;
- /*这项样式属性可以同时指定三种不同的元素边框属性
- border-color,border-width,border-style*/
- padding: 8px;/*这项样式属性定义元素上、右、下、左的内缘宽度*/
- }
- .demo-inner {
- border: 3px solid black;
- padding: 0 8px 8px 8px;
- zoom:1;
- }
- .demo1 {
- border: 1px solid black;
- margin-top: 8px;
- }
- .demo2 {
- border: 1px solid blue;
- margin-top: -1px;
- zoom:1;
- }
- .demo-outer p {
- margin-bottom: 0;
- }
- <div class="demo-outer">
- <div class="demo-inner">
- <div class="demo1">
- This is a <div> with a border and a positive top margin.
- </div>
- <div class="demo2">
- This is a <div> with a border and a negative top margin.
- </div>
- <div class="demo1">
- This is a <div> with a border and a positive top margin.
- </div>
- <div class="demo2">
- This is a <div> with a border and a negative top margin.
- </div>
- </div>
- <p>This is a <p> that does <strong>not</strong> have a border.</p>
- </div>