欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

IE7中的正確輸出

CSS
錢諍諍1年前9瀏覽0評論

問題是:帶有“絕對位置”的CSS“自動邊距”規則在IE7中不起作用。問題在IE7，所有其他瀏覽器一切正常。我有一個帶有“相對位置”的父元素，它包含一個帶有“絕對位置”的子元素。我需要將元素與相對于父元素左右兩側的“絕對位置”對齊。

.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>

我能想到的唯一可能的解決辦法是這個..

.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

.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;
    
    }

<!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>