定位元素的IE/Edge問題

我有兩個div元素樣式爲表格單元格。在頁腳上有兩個按鈕。當我點擊按鈕時，他們不會留在他們應該在Microsoft Edge瀏覽器中的地方。定位元素的IE/Edge問題

在其他瀏覽器中一切正常。

下面的代碼塊例如：

.table { 
 
    display: table; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 50%; 
 
    background: #eee; 
 
    border-right: 10px solid #fff; 
 
    padding: 15px; 
 
    height: 100%; 
 
} 
 
.buttons { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    right: 15px; 
 
}

<div class="table"> 
 
    <div class="table-cell"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores! Lorem ipsum dolor 
 
    sit amet, consectetur adipisicing elit. Magni facilis explicabo at quos fugit natus mollitia facere, eos, ea inventore porro voluptate doloremque in sed cupiditate accusamus nisi sapiente quas. 
 
    </div> 
 

 
    <div class="table-cell"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam et quae esse, impedit sequi ex expedita. Assumenda totam eveniet laudantium corporis dignissimos, illo voluptatibus ratione sit eum numquam a, hic? 
 
    <div class="buttons"> 
 
     <button>Clear</button> 
 
     <button>Go</button> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2016-04-15 Anwar Hussain

工作正常，在這裏你可以分享拍攝畫面 –

http://s26.postimg.org/6k5766vop/anwar_576.jpg 按鈕應該是在底部，我絕對定位 –

這裏是另一個截圖：http://s26.postimg.org/y8rudpip5/anwar_576.jpg –

好了，我已經解決了這個問題嘍！如果有人有類似的問題，請執行以下操作： 1.首先您的包裹內容顯示器內部的二次DIV：表格單元格 2.化妝的位置是：相對的，高度：100％新包裝的div

問題解決了！更新代碼：

.table { 
 
    display: table; 
 
    height: 300px; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    width: 50%; 
 
    background: #eee; 
 
    border-right: 10px solid #fff; 
 
    padding: 15px; 
 
} 
 
.content { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.buttons { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="table"> 
 
    <div class="table-cell"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores! 
 
    </div> 
 

 
    <div class="table-cell"> 
 
    <div class="content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam et quae esse, impedit sequi ex expedita. Assumenda totam eveniet laudantium corporis dignissimos, illo voluptatibus ratione sit eum numquam a, hic? 
 
     <div class="buttons"> 
 
     <button>Clear</button> 
 
     <button>Go</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-04-15 15:39:45

定位元素的IE/Edge問題

回答

相關問題