边距：自动在 IE 中不起作用

Posted

技术标签:

【中文标题】边距：自动在 IE 中不起作用【英文标题】：Margin: Auto not working in IE 【发布时间】：2011-12-10 06:04:30 【问题描述】：

URL:http://cyberbat.co.uk/testcontainer margin:auto 不工作，有没有其他方法可以放在IE中间。

编辑：再次检查， index.php 是错误的文件，我用 index.html 替换它。

【问题讨论】：

糟糕的问题。显示一些 HTML 源代码，我们不想从您的链接中找到它......然后把什么放在中间？ 你只需要一个.page 的容器，它的text-align 应该是center。 IE 无法通过margin 集中block-tag（如divs 或uls）。在答案中查看下面的代码 链接失效了。 【参考方案1】：

在笨浏览器的父容器上使用它：

text-align: center

【讨论】：

【参考方案2】：

你有 RAW php 代码是因为你没有正确配置服务器：

<?php
include('inc/settings.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

通过将 PHP 应用于 *.html 文件来解决该问题，&lt;?php include ?&gt; 不会按字面意思显示。如果我没记错的话，将 .ini 文件中的这一行调整为：

AddType application/x-httpd-php .html .htm .php

因为这个文字后端代码在 DOCTYPE 前面，它会导致 IE 中的 quirks 模式和 quirks 中的水平自动边距无法正常工作。

您可以在父元素上使用 text-align:center ，但这对 IE 来说是一个 hack，您应该通过我上面的建议让 IE 以标准模式呈现它来正确解决这个问题。

【讨论】：

【参考方案3】：

由于标记顶部的这种虚假处理指令，Internet Explorer 以怪异模式显示您的网站：

<?php
include('inc/settings.php');
?>

删除它； margin: auto 在 IE6+ 中工作。 没有需要进行text-align: center 或其他不必要的更改。

【讨论】：

对不起，那是 php 文件。再检查一遍，我把index.html文件替换成了index.php文件。 @Lewes 如果我打开您提供的链接，我仍然可以在源代码顶部看到&lt;?php ...（在浏览器中按 Ctrl+U 以显示源代码）。【参考方案4】：

这是 IE 中的一个错误！ 您只需为&lt;div class="page"&gt; 创建一个持有者并将其text-align 设置为center

.page-holder
    text-align:center;

.page
    margin:0 auto;

<div class="page-holder">
    <div class="page">
    page content
    </div>
</div>

【讨论】：

【参考方案5】： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

您的问题是定义您的文件类型和标准。如果您将此代码添加到文件顶部，它将起作用！

【讨论】：

我添加了 HTML 5 的 &lt;!DOCTYPE html&gt;，现在 IE 的行为符合预期。 10x【参考方案6】：

尝试在父项上使用以下内容。

display: flex;
align-items: center;

【讨论】：

或者 display: flex on parent and align-self: center on child 如果你只希望一个元素垂直居中【参考方案7】：

尝试将meta 记录添加到head：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

【讨论】：

这实际上比所有其他提到的让我的页面在 IE11 中显示的方法都更好，就像在 Chrome 中一样。【参考方案8】：

您可以下载 normalize.css（只需 google 即可）并将其链接到您的项目，现在您可以像这样使用 smth：

HTML：

    <main class="container></main>

CSS：

    .container 
      margin-left: auto;
      margin-right: auto;
      width: 600px;

【讨论】：

【参考方案9】：

对于 IE，将 my-auto 替换为 align-self-center 和 BINGO。您也可以为此编写 CSS：

.center-container
   align-self: center;

【讨论】：

align-self 是一个 flexbox 属性，除非在 flexbox 容器中，否则它将不起作用。

以上是关于边距：自动在 IE 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

使用多个分隔符的自动完成功能在 IE 中不起作用

Ag 网格：在运行时自动调整列在 chrome/IE 11 中不起作用

Div 的边距在 Internet Explorer 中不起作用

特定断点处元素的边距在 Tailwind 中不起作用

自动换行在 Internet Explorer 中不起作用

Javascript addEventListener onStateChange 在 IE 中不起作用