Question

ENG

问题家伙是：规则CSS'margin auto'与'position absolute'在IE7中不起作用。 IE7中的问题，所有其他浏览器一切正常。我有一个父元素，'position relative'它包含一个'position absolute'的子元素。我需要将元素与'position absolute'相对于父元素的左侧和右侧对齐。

RUS

Проблемаребятасостоитвследующем：правилоCSS'marginauto'вместес'位置绝对'неработаетвIE7。 IE7，вовсехдругихбраузерахвсеработаетотлично的Проблемаименно。 Уменяестьродительскийэлементс'位置相对'онсодержитребенкас'位置绝对'。 Мненужновыровнятьэлементc'positionabsolute'поотношениюклевойиправойсторонродительскогоэлемента。

    .header {
      width: 100%;
      min-width: 1000px;
      position: relative;
      height: 341px;
    }

    .block-up {
      width: 100%;
      min-width: 1000px;
      background: #da251c;
      height: 341px;
    }

    .block-down {
      width: 100%;
      min-width: 1000px;
      background:  #585453;
      overflow: hidden;
      height: 341px;
    }

    /*problem areas*/
    
    .header-content {
      background: #ffffff;
      position: absolute;
      width: 493px;
      top: 150px;
      left: 10px;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 341px;
    }
    /*problem areas*/

    .header-content-box {
      position: relative;
      width: 162px;
      float: left;
      border: 1px solid red;
      height: 341px;
    }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <div class="header">
      <div class="block-up">
      </div>
      <div class="block-down">
      </div>
      <div class="header-content">
        
        <div class="header-content-box">
           ......
        </div>
          
        <div class="header-content-box">
          ......
        </div>
            
        <div class="header-content-box">
          ......
        </div>
      </div>
    </div>

Answer 1

我能想到的唯一可能solution就是这个..

.header-content {
  background: #ffffff;
  position: absolute;
  display:block;
  width: 493px;
  top: 150px;
  left: 50%;
  margin-left:-247px;
  right: 0;
  bottom: 0;
  height: 341px;
}

这将向左移动50％并向左移动-50％宽度..它的痛苦和丑陋..但IE7也是如此..

JSFiddle

＆＃13;

 .header {
      width: 100%;
      min-width: 1000px;
      position: relative;
      height: 341px;
    }

    .block-up {
      width: 100%;
      min-width: 1000px;
      background: #da251c;
      height: 341px;
    }

    .block-down {
      width: 100%;
      min-width: 1000px;
      background:  #585453;
      overflow: hidden;
      height: 341px;
    }

    /*problem areas*/
    
    .header-content {
      background: #ffffff;
      position: absolute;
      display:block;
      width: 493px;
      top: 150px;
      left: 50%;
      margin-left:-247px;
      right: 0;
      bottom: 0;
      /*margin:0 auto;*/
      height: 341px;
    }
    /*problem areas*/

    .header-content-box {
      position: relative;
      width: 162px;
      float: left;
      border: 1px solid red;
      height: 341px;
    
    }

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
    <div class="header">
      <div class="block-up">
      </div>
      <div class="block-down">
      </div>
      <div class="header-content">
        
        <div class="header-content-box">
           ......
        </div>
          
        <div class="header-content-box">
          ......
        </div>
            
        <div class="header-content-box">
          ......
        </div>
      </div>
    </div>
  </body>

＆＃13;

在IE7中输出正确

1 个答案: