[英]Element positioning in Internet Explorer
I have booking form . 我有预订表格 。
In the process of submitting the form, an animated loader is displayed. 在提交表单的过程中,将显示动画加载器。 The loader is a div with id = "booking_loader".
加载程序是一个id =“ booking_loader”的div。 Watch how it looks like in Chrome: https://youtu.be/XeRSx3VTt3g .
观看Chrome中的外观: https : //youtu.be/XeRSx3VTt3g 。
But here's how it looks in the Internet Explorer: https://youtu.be/djaCuHQc9Qw 但是这是它在Internet Explorer中的外观: https : //youtu.be/djaCuHQc9Qw
In Explorer, the element is bound to screen coordinates and does not seem to see the parent's div. 在资源管理器中,该元素绑定到屏幕坐标,并且似乎看不到父级的div。 He gets fixed position, but should be absolute.
他的位置固定,但应该绝对。
HTML: HTML:
<div id="Booking-Panel">
<h5 class="text-white">Запис на консультацію</h5>
<form action="/Home/Booking" id="bookingform" method="post">
<div class="group-12 group-top blur bookingpanel" id="bookingpanel">
<div class="group-item element-fullwidth">
<div class="form-group form-group-label-outside">
<label for="index-name">Ім'я</label>
<input id="index-name" placeholder="Iм'я" type="text">
</div>
</div>
<!-- Others inputs -->
<div class="group-item element-fullwidth offset-top-20 text-center text-md-left">
<button id="submit-booking" type="submit" class="btn-ellipse btn btn-primary">Записатись</button>
</div>
</div>
</form>
<div class="loader hidden-loader" id="booking_loader">
<div id="largeBox"></div>
<div id="smallBox"></div>
</div>
<script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/api2/r20171212152908/recaptcha__uk.js"></script><script src="https://www.google.com/recaptcha/api.js?hl=uk"></script>
css: CSS:
#Booking-Panel {
position:relative;
transition: 0.5s;
}
.loader {
width: 3em;
height: 3em;
animation: loaderAnim 1.35s infinite;
outline: 1px solid transparent;
position:absolute;
left:158px;
top: 215px;
transition: 0.6s;
}
#largeBox
{
height: 3em;
width: 3em;
background-color: #ececec;
outline: 2px solid transparent ;
position: fixed;
border-radius:1px;
}
#smallBox {
height: 3em;
width: 3em;
background-color: #54717f;
position: fixed;
z-index: 1;
outline: 3px solid transparent;
animation: smallBoxAnim 1.35s alternate infinite ease-in-out;
border-radius:1px;
}
Where is the mistake? 错误在哪里?
Instead of making use of tweaked around values for centering the loader : 而不是利用围绕值的调整来使加载器居中:
.loader {
width: 3em;
height: 3em;
animation: loaderAnim 1.35s infinite;
outline: 1px solid transparent;
position:absolute;
left:158px;
top: 215px;
transition: 0.6s;
}
try using transform as below: 尝试使用以下转换 :
.loader {
width: 3em;
height: 3em;
animation: loaderAnim 1.35s infinite;
-webkit-animation: loaderAnim 1.35s infinite;
-moz-animation: loaderAnim 1.35s infinite;
-o-animation: loaderAnim 1.35s infinite;
outline: 1px solid transparent;
position:absolute;
left:50%;
top: 50%;
transform:translate(-50%,-50%);
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}
These 3 lines of code centers any absolute positioned child element with relation to its parent container (they must have the necessary position:value
set) to the vertical and horizontal center of it. 这三行代码将任何绝对定位的子元素相对于其父容器 (它们必须具有必要的
position:value
集)相对于其垂直和水平中心。
left:50%;
top: 50%;
transform:translate(-50%,-50%);
Another tip would be to include -webkit,-o,-moz
for your transition and animation as different browsers might treat them differently. 另一个技巧是为过渡和动画添加
-webkit,-o,-moz
,因为不同的浏览器可能会对它们进行不同的处理。
I published my project at solisdent.com.ua the problem has disappeared. 我在solisdent.com.ua上发布了我的项目,问题已经消失了。 I don't understand why the local IIS server does not display the page correctly.
我不明白为什么本地IIS服务器无法正确显示页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.