IE5 垂直对齐答案

【问题标题】：IE5 Vertical AlignIE5 垂直对齐
【发布时间】：2015-01-16 05:44:48
【问题描述】：

我正在开发一个运行 IE5 的扫描仪项目（是的，我知道！）并且他们要求链接应该是具有高度的块元素。在这个块内，他们希望它的内容垂直和水平对齐到中心。

我有这个 html（一个）：

<a class="block cancel vertical-align text-center" href="#" id="btn-cancel">
    <h4>Cancel</h4>
</a>

而 SCSS 是：

.block {
    display: inline-block;
    *zoom: 1;
    *display: inline;

    height: 100%;
    width: 100%;
    background-color: #3C60EF;

    .block-content {
        padding: 4px;

        > h1, > h2, > h3, > h4, > h5 {
            margin-top: 0;
        }

        @media screen and (min-width: 992px) {
            padding: 10px;
        }
    }
}

.block.vertical-align {    
    display: table-cell;
    vertical-align: middle;

    h3, h4, h5, h6, p, .block-content {
        padding: 0 10px !important;
    }

    form {
        .form-group {
            margin: 0;
        }
    }
}

a.block {    
    background-position: center center;
    background-repeat: no-repeat;
}

.text-center {
    text-align: center;
}

这在我的机器上运行良好（使用最新的浏览器），但在扫描仪上一切都与顶部对齐。

任何人都可以提出任何可能对我有帮助的建议吗？

【问题讨论】：

IE5 是否允许在一个元素上使用多个类？
您是否有亲戚/朋友正在使用 Windows 95 PC 并且仍然拥有 Windows 95 所使用的原始软盘/CD？他们会想要一台漂亮的新电脑来换取它吗？
是的，IE6 不允许多个类，所以在那个之下，不行。
IE5 不支持 CSS 中的多个类选择器（例如 .foo.bar）。 IE5 也不支持display: table-cell（为此您需要 IE7 或 IE8）。您唯一的垂直居中选项是使用行高或绝对定位。
你可以（不要打我）使用表格单元格作为容器。它不是语义的，但似乎是 HTML 电子邮件布局的公认解决方案。它是IE5。我敢肯定，在 IE5 时代，表格布局仍然很常见。

标签： css internet-explorer sass internet-explorer-5

【解决方案1】：

<style>
.text-center {
    text-align: center;
}

.fullFrame{
    width: 100%;
    height: 100%;
}
</style>

<table class="fullFrame">
    <tr>
        <td class="text-center">

<a class="block cancel vertical-align text-center" href="#" id="btn-cancel">
<h4>Cancel</h4>
</a>

        </td>
    </tr>
</table>

这将使取消链接位于页面的垂直和水平中心。我只能检查低至 IE6，它似乎工作。不确定 IE5，但我不知道您为什么要尝试支持它，因为它已经过时了。

【讨论】：