引导程序和 ms 边缘错误？

Question

我已经创建了网站（引导程序）。 在 chrome/firefox 等上工作，但在边缘我有问题。 在底部看这个页面，有 4 个按钮。 当它们悬停时，它们会移动并且不会回到正常位置。 我在网上搜索，但找不到有关此错误的任何信息。 或者是我的错误代码？ 你怎么认为？

下面的代码

 #bottom_fourth_row { display: table; margin-top: 15px; } #bottom_fourth_row [class*="col-"] { float: none; display: table-cell; vertical-align: top; position: relative; padding-bottom: 45px; /*display: table-cell; vertical-align: top; position: relative; padding-bottom: 45px;*/ } #bottom_fourth_row>.col-sm-3>img {} #bottom_fourth_row>.col-sm-3>h3 { font-family: avenir_light; height: 50px; text-align: left; color: #027a9e; padding: 0; font-size: 22px; font-weight: bold; } #bottom_fourth_row>.col-sm-3>h4 { font-family: avenir_light; text-align: left; padding: 0; color: #7d7d7d; font-size: 18px; line-height: 1.3em; } #bottom_fourth_row [class*="col-"] button { position: absolute; bottom: 0; right: 20px; margin-left: auto; margin-right: auto; width: 90px; height: 40px; background-color: #2aa3c3; font-family: basic; font-size: 20px; color: #ffffff; } #bottom_fourth_row [class*="col-"] button>a, #bottom_fourth_row [class*="col-"] button>a:focus, #bottom_fourth_row [class*="col-"] button>a:hover, #bottom_fourth_row [class*="col-"] button>a:visited { color: #ffffff; }

 <div class="row" id="bottom_fourth_row"> <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> <h3>text</h3> <h4>text</h4> <form> <div class="form-inline"> <input type="text" name="email" id="email" placeholder="Email" /> <input type="hidden" name="list" value="wgPkaIHO7pFCp9G65wvXXw" /> <button type="submit" name="submit" id="submit" class="btn">submit</button> </div> </form> </div> <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> <h3>text</h3> <h4>text</h4> <button class="btn"><a href="#">more</a></button> </div> <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> <h3>text</h3> <h4>text</h4> <button class="btn"><a href="#">more</a></button> </div> <div class="col-xs-12 col-sm-3"> <img src="http://placehold.it/350x150"> <h3>text</h3> <h4>text</h4> <button class="btn"><a href="#">more</a></button> </div> </div>

Answer 1

所以我找到了 Edge 和我一起玩的原因。 在#bottom_fourth_row [class*="col-"]我删除了：

float: none;
display: table-cell;

并添加：

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;

这有助于解决这个问题。

有趣的是，这仅适用于 Edge。