定位元素的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问题

回答

相关问题