在做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時的問題。
希望有對此瞭解的朋友可以解惑!