【问题标题】:Margin: Auto not working in IE边距:自动在 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)。在答案中查看下面的代码
  • 链接失效了。

标签: css internet-explorer internet-explorer-9 margin text-align


【解决方案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 容器中,否则它将不起作用。
          猜你喜欢
          • 2012-03-07
          • 2011-11-17
          • 2012-12-04
          • 2012-09-20
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-09-12
          • 2012-05-09
          相关资源
          最近更新 更多