min-height導致div寬度莫名正大

     在做asp.net mvc開發的時候遇到一個問題,做了一個modal dialog的對話框用了編輯form表單,當點擊提交按鈕時,

使用ajax的方式提交表單,但在點擊按鈕的瞬間,這個modal dialog窗體總是無緣無故的變寬一下(IE11,寬度應該是等於滾動條寬度),

後來將頁面逐步簡化到如下的代碼,仍然有這個問題:

<html>
   <head>
      <style type="text/css">
         .parent{
              background-color:yellow;
              position:fixed;
              padding:10px;
          }
         .nav{
              background-color:red;
              overflow:auto;
              min-height:30px;
           }
       </style>

   </head>
   <body>
        <div class="parent">
              <div class="nav">aaa</div>
       </div>

    </body>
</html>

效果如下:

        而當把min-height屬性如掉,或者將其改成小於正常高度,或者去掉overflow:auto屬性設置,或者去掉其父div的position:fixed設置並將其移動到自己身上時,就會正常顯示:

      一直未找到對此問題的科學解釋,目前只能簡單歸結爲IE對min-height和overflow:auto的render時的問題。

希望有對此瞭解的朋友可以解惑!



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章