ie下margin不居中的三种解决方法资源-CSDN文库

5 浏览量 2020-09-25 03:44:43 上传评论收藏 28KB PDF 举报

在编写网页时，为了使内容在浏览器中居中显示，开发者通常会使用CSS样式`margin: 0 auto;`来达到预期效果。这个样式能够使块级元素在其包含块中水平居中。然而，当在旧版本的Internet Explorer浏览器（IE6、IE7、IE8）中浏览时，有时候会发现`margin: 0 auto;`并不能像在Firefox、Chrome等其他现代浏览器中一样正常工作，导致布局居中问题。为了解决IE下margin不居中的问题，文章提供了三种方法： 1. 对网页主体`<body>`声明文本居中在HTML文档中，我们可以通过给`<body>`标签添加`text-align: center;`属性，来让其中的所有内容默认居中。这是因为`text-align: center;`会使得其中的行内内容（行内元素或行内块元素）在水平方向上居中。在这种情况下，我们通常会将需要居中的`div`设置为`display: inline-block;`或者`display: block;`，这样`margin: 0 auto;`才能正常工作。示例代码如下： ```css body { text-align: center; } #con { width: 980px; display: inline-block; /* 或者 display: block; */ margin: 0 auto; } ``` ```html <div id="con">margin: 0 auto; 内容居中显示</div> ``` 2. 在要居中的div外层添加多一个div，并使其居中这个方法是创建一个外层的`div`，并为其设置`text-align: center;`属性，然后将原本需要居中的`div`放在这层外层`div`内部。这样做的话，外层`div`中的内容（即内层的`div`）会因为外层`div`的文本居中而得到居中效果。示例代码如下： ```css #con { width: 980px; margin: 0 auto; } ``` ```html <div style="text-align: center;"> <div id="con">margin: 0 auto; 内容居中显示</div> </div> ``` 3. 修改DTD声明文档类型声明（DTD）是用于定义XML或HTML文档类型和版本的。在HTML5之前，不同的DTD声明会对HTML文档的渲染方式产生影响。对于`margin: 0 auto;`在IE浏览器中不居中的问题，有时修改文档类型声明可以解决问题。具体操作是将DTD从XHTML的声明修改为HTML5的声明，即： ```html <!DOCTYPE html> ``` 不过，需要注意的是，并非所有情况下都需要修改DTD声明来解决这个问题，这主要取决于网页的具体内容和布局。在某些情况下，如果文档在XHTML中声明了严格DTD，而页面是按照HTML5的标准来编写的，可能会导致一些渲染问题。这种情况下，将DTD声明改为HTML5，有可能解决布局问题。请注意，以上提及的解决方法虽然适用于旧版IE浏览器，但现代浏览器如Chrome、Firefox以及Edge都已经支持标准的CSS属性。因此，在开发现代网页时，推荐使用符合标准的布局技术，并利用CSS3的特性，比如Flexbox或者Grid布局，来保证网页的兼容性和未来的可维护性。

资源推荐

资源详情

资源评论