Question

我无法解决在IE9中集中内容块的问题。我从网上尝试了各种各样的东西，没有用。如果可能的话，我会感激，如果这可以托管在我可以看到它工作的地方。

我已经定义了doctype：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <![endif]-->

我还试着在评论的＃34; [if IE]＆＃34;甚至更换了＃34; EmulateIE7＆＃34;用＆＃34; edge＆＃34;，没有用：

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

火狐/铬： Firefox

IE 9： IE9

CSS：

.zone {
    width: 0; 
    height: 0;
    border: solid transparent;
}

.container {
    border: 4px solid #666;
    position: relative;
    float: left;
    margin: 2px;
}

.zone-label {
    background-color: #666;
    color: white;
    font-size: 25px;
    font-weight: bold;
    padding: 0 5px;
    position: absolute;
    margin: 0 -50% 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layout {
    /*position: relative;*/
}

.clear {
    clear: both;
}

.zone-green-949 {
    border-width: 120px 475px;
    border-color: black green;
}

.container-green-949 {
    width: 949px;
}

.zone-blue-308 {
    border-width: 76px 154px;
    border-color: black blue;
}

.container-blue-308 {
    width: 308px;
}

.zone-purple-629 {
    border-width: 159px 315px;
    border-color: black purple;
}

.container-purple-629 {
    width: 629px;
}

HTML：

<div class="layout">
    <div class="container container-green-949">
        <div class="zone zone-green-949">
            <span class="zone-label">Zone 12</span>
        </div>
    </div>

    <div class="clear">

    <div>
        <div class="container container-purple-629">
            <div class="zone zone-purple-629">
                <span class="zone-label">Slider</span>
            </div>
        </div>

        <div class="container container-blue-308">
            <div class="zone zone-blue-308">
                <span class="zone-label">Zone 1</span>
            </div>
        </div>    
        <div style="clear: right;">
        <div class="container container-blue-308">
            <div class="zone zone-blue-308">
                <span class="zone-label">Facebook Fan</span>
            </div>
        </div>    
    </div>
</div>

修改：答案是添加此内容（请参阅下面的Hashem Qolami评论）： -ms-transform：translate（-50％， - 50％）;

Answer 1

答案是添加这个（参见Hashem Qolami的评论）： -ms-transform：translate（-50％， - 50％）;

Answer 2

虽然我无法重现效果，但我猜测你需要设置变换原点：

.zone-label {
    background-color: #666;
    color: white;
    font-size: 25px;
    font-weight: bold;
    padding: 0 5px;
    position: absolute;
    margin: 0 -50% 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Set the origin for different browsers */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}

这可以确保所有浏览器都使用中间作为变换方向点。

请告诉我这是否适合您。

IE9和/或早期版本中的中心块

2 个答案: