Question

我的页面水平和垂直居中，页面适用于所有浏览器，但对于IE，页面仅适用于IE11（最新）。在IE 10,9和8中，表格在页面顶部垂直对齐。如何在IE 10,9和8中使垂直对齐工作，我需要更改什么？

HTML

<body>
<div class="container">
  <div class="content">
    <table width="350px">
        <tr>
            <td>
                <img border='0' src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' width='300' height='300' style="margin:25px 25px 50px 25px;">
            </td>
        </tr>
        <tr>
            <td align="center">
                <p style="margin: 0px 0px 50px 0px;">Street<br>
                   0000AA City
                </p>
            </td>
        </tr>
        <tr>
            <td align="center" class="contact">
                <p style="margin: 0px 0px 50px 0px;">
                   <span style="color:#DDB4A4;">T</span>&nbsp; <a href="tel:000000">000000</a><br>
                   <span style="color:#DDB4A4;">E</span>&nbsp; <a href="mailto:info@info.com">info@info.nl</a><br>
                </p>
            </td>
        </tr>
        <tr>
            <td align="center">
                <p style="color:#999999; margin: 0px 0px 25px 0px; font-size: 16px;">Text</p>
            </td>
        </tr>
    </table>
  </div>
 </div>
<body>

的CSS

    html, body 
    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: table;
    }
    .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .content {
        display: inline-block;
        text-align: left;
    }
    table {
        font-size:18px;
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #4D4D4D;
    }
    .contact a:link 
    {
        color: #4D4D4D;
         text-decoration: none;
    }
    .contact a:hover 
    {
        color: #1a0dab;
        text-decoration: underline; 
    }

JSFiddle：https://jsfiddle.net/64ys7j6n/

Answer 1

较旧的IE浏览器无法很好地处理html和body的display:table。此外，它不需要。

解决方案：不要将display:table分配给html，而只分配给body。 html只需要height:100%。

html {
    height:100%;
}
body 
{
    margin: 0;
    width: 100%;
    height: 100%;
    display: table;
}

New fiddle

IE：中间的垂直对齐表

1 个答案: