Question

我意识到这个问题已经被问了很多次，但没有一个建议的解决方案对我有用。基本上我的标签不会以IE9 +为中心。它的使用余量：0自动。我在body和html样式中添加了text-align：center。我有一个有效的doctype。唯一的问题是我在doctype之前有一些PHP。如果这是问题，我该如何解决这个问题？

这是我的代码：

CSS

html{
    height: 100%;
    width: 100%;
    font-family: GothamBook;
    text-align: center;
}

body{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-image: url(../Images/bg-pattern-gray.png);
}

main{
    box-sizing: border-box;
    text-align: left;
    width: 940px;
    margin: 0 auto; 
    padding: 10px 40px;
    padding-bottom: 40px;
    background-color: #FFFFFF;
    position: relative;
    overflow: auto;
}

＆GT; 的index.php

<?php

    include_once "../PHP/HeaderFooter.php";
    include_once "../PHP/Event.php";

    $headerFooter = new HeaderFooter();
    $eventID = "";

    if(isset($_GET['eventID']) && !empty($_GET['eventID'])){
        $eventID = $_GET['eventID'];
        $event = new Event($eventID);
    }


?>

<!DOCTYPE html>
<html>
    <head>
        <?php 
            echo "<title>" . $event->eventTitle . "</title>";
        ?>
        <link rel='stylesheet' href='../CSS/reset.css' />
        <link rel='stylesheet' href='../CSS/global.css' />
        <link rel='stylesheet' href='../CSS/event.css' />

    </head>
    <body>
        <main>content</main><script src='../JS/jquery-2.1.0.min.js'></script>
        <script src='../JS/jquery.expander.min.js'></script>
        <script src='../JS/expanderScript.js'></script>
    </body>
</html>

修改

感谢您的回复。我们甚至没想过要看主标签是否得到支持。我决定只将主标签更改为id为main的div。这样就很容易解决。

Answer 1

Internet Explorer不支持<main>。他们都不是。请参阅CanIUse (at notes)和MDN。

正因为如此，IE不会设置它不支持的元素。您可以使用html5shiv/html5shim这是polyfill或具有polyfill的modernizr等等。

从现在开始，IE将为它设计风格。但是你需要设置main的默认CSS，特别是你的CSS上缺少的，正如@bboysupaman所说：

main { display: block; }

或者只使用normalize.css覆盖所有其他css之前的所有默认样式。

证明：

只是一个更新证明了我向用户C-link Nepal及其main呈现{{1}}的观点：

我测试了一个真正的IE10，而不是模拟的东西。这是magic IE。

在IE上打开iframe网址：Fiddle如果真的被阻止，下面就不会发生！

enter image description here （油漆技巧ftw）

Answer 2

将以下内容添加到您的css：

main {
display: block;
}

应该照顾它。

中心内容在IE9 +中

2 个答案:

证明：