一般很多人遇到的margin失效都是纵向上面的:
一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释);
另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。
那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。
我们来看看具体的失效代码：
### margin-left/right 失效的原因及其解决方案
#### 一、问题背景
在Web前端开发过程中，经常遇到元素的`margin`属性无法按照预期的方式显示的情况。通常这种情况发生在垂直方向上，即`margin-top`和`margin-bottom`。但是，本文讨论的是水平方向上的`margin-left`和`margin-right`失效问题。
#### 二、margin-left/right 失效的现象及原因
**现象：**
在某些情况下，如在Internet Explorer浏览器中，即使设置了`margin-left`或`margin-right`的值，元素的实际布局却未发生变化，即所谓的“失效”。
**原因分析：**
1. **hasLayout 触发条件：**`margin-left`和`margin-right`的失效与一个非标准的IE属性`hasLayout`有关。当一个元素具有`hasLayout`属性时，它的渲染行为会发生变化，可能会导致`margin-left`和`margin-right`无法正常工作。
2. **hasLayout 的触发：**
- **高度属性：** 当元素设置了明确的高度(height)时，该元素会被认为已经具有`hasLayout`。
- **边框(border)：** 当元素设置了边框时，也会触发`hasLayout`。
- **浮动(floating)：** 设置了浮动的元素也会触发`hasLayout`。
3. **子级元素的影响：** 如果父级元素中的子元素具有`hasLayout`，这同样可能影响到父级元素的行为，导致`margin-left`和`margin-right`失效。
#### 三、示例代码分析
在给出的示例代码中，可以看到`.cont`类设置了`margin:0 30px;`，但在IE下，这个设置并未生效。具体原因在于`.cont`同时设置了`height:30px;`和`border-bottom:2px solid #aaa;`。这两个属性都可能导致`hasLayout`被触发，从而影响`margin-left`和`margin-right`的正常工作。
#### 四、解决方案
1. **移除触发条件：** 移除`height`属性或其他可能导致`hasLayout`触发的属性，例如移除`.cont`的`height`属性。
```css
.cont { border-bottom: 2px solid #aaa; margin: 0 30px; }
```
2. **使用`zoom`属性：** 在父元素上添加`zoom: 1;`属性，可以强制触发`hasLayout`，从而解决`margin-left`和`margin-right`失效的问题。
```css
.wrap { background: #eee; border: 1px solid #ccc; zoom: 1; } /* 添加zoom */
```
3. **避免不必要的边框设置：** 如文中所述，如果移除`.wrap`上的边框，`margin-left`和`margin-right`同样可以正常工作。
```css
.wrap { background: #eee; /* 移除border */ }
```
4. **深入理解`hasLayout`：** `hasLayout`是一个IE专有的属性，用于控制元素的布局方式。通过阅读更多关于`hasLayout`的文章，如"On having layout"等，可以帮助更全面地理解其背后的原理和触发条件。
#### 五、总结
对于`margin-left`和`margin-right`失效的问题，主要原因是由于IE浏览器中的`hasLayout`属性触发机制所导致。通过调整CSS样式表中的属性设置，如移除特定属性、使用`zoom`属性或者深入了解`hasLayout`的工作机制，可以有效地解决这一问题。此外，在实际开发中，还需要注意不同浏览器之间的兼容性问题，确保网页能够跨浏览器稳定运行。
- 1
- 2
- 3
前往页