绝对底部定位在 Edge 和 IE 中无法正常工作
Absolute bottom positioning not working as expected in Edge and IE
我有一个绝对定位在 bottom: 50px
的图标,虽然这在每个浏览器中都可以正常工作,但 Edge 和 IE 除外。我知道 Microsoft 的浏览器存在很多问题以及它们如何以不同方式呈现。在这里,我看到浏览器将 100vh
div 的中间点视为底部。我需要帮助的是在 IE 和 Edge 中以与在 Chrome、Opera 和 Firefox 中相同的方式定位图标。谢谢。
IE 和边缘
Chrome、Firefox、Opera
HTML
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
/* this is the icon I was talking about */
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin: auto;
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div>
我修好了!只需使用 margin-left: auto;
和 margin-right: auto;
而不是 margin: auto;
试试这个,我把margin: auto;
改成了margin: 0 auto;
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin:0 auto; /* change here */
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1">
<img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt="">
</div>
我在这两个浏览器上遇到了类似的问题,绝对位置太疯狂了。在风格部分我有。
td.Cir {width:7in; height:7in; background-image:url('clock.png');
background-size: 45%; background-position: center;
background-repeat:no-repeat; position:relative; font-size:28pt;
min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
1px 0 blue, 0 -1px blue;}
在 table 我有
</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>
我将代码更改为
<table><tr><td class='Cir'>...</td><td>...</td></tr></table>
Edge 和 IE 现在可以正常工作了
我有一个绝对定位在 bottom: 50px
的图标,虽然这在每个浏览器中都可以正常工作,但 Edge 和 IE 除外。我知道 Microsoft 的浏览器存在很多问题以及它们如何以不同方式呈现。在这里,我看到浏览器将 100vh
div 的中间点视为底部。我需要帮助的是在 IE 和 Edge 中以与在 Chrome、Opera 和 Firefox 中相同的方式定位图标。谢谢。
IE 和边缘
Chrome、Firefox、Opera
HTML
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
/* this is the icon I was talking about */
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin: auto;
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div>
我修好了!只需使用 margin-left: auto;
和 margin-right: auto;
而不是 margin: auto;
试试这个,我把margin: auto;
改成了margin: 0 auto;
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin:0 auto; /* change here */
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1">
<img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt="">
</div>
我在这两个浏览器上遇到了类似的问题,绝对位置太疯狂了。在风格部分我有。
td.Cir {width:7in; height:7in; background-image:url('clock.png');
background-size: 45%; background-position: center;
background-repeat:no-repeat; position:relative; font-size:28pt;
min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
1px 0 blue, 0 -1px blue;}
在 table 我有
</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>
我将代码更改为
<table><tr><td class='Cir'>...</td><td>...</td></tr></table>
Edge 和 IE 现在可以正常工作了