Question

我尝试了几种支持IE的代码方法 - 没有成功。请参阅下面的屏幕截图，看看我正在展示的问题。

position: relative;和position: absolute;在css的父级中无效。

前几行显示 -

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=11">

HTML

<div class="notice-wrapper">
        <div class="notice-overlay">
            <div class="notices">
                <div class="box-left">
                    <img src="imgs/check.png" alt="Everything is Good! - Sorenson VRS">
                    <p class="good">EVERYTHING IS GOOD!</p>
                </div>
                <div class="box-right"><h1>Service Outage</h1><p>Sorenson is not experiencing any service outage at this time. If  you are experience problems connecting to VRS, please restart the Sorenson endpoint (VP, PC, or Mobile device). if you continue to have problems, please contact Tech Support below.</p></div>
            </div>
        </div>
    </div>
    <div class="service-wrapper">
        <div class="services">
            <a href=""><div class="button"><img src="imgs/icon-techsup.png" class="iconBtn"> TECHNICAL SUPPORT</div></a>
            <div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
        </div>
        <div class="services">
            <a href=""><div class="button"><img src="imgs/icon-custserv.png" class="iconBtn"> CUSTOMER SERVICES</div></a>
            <div class="text2"><p>For questions about applying for ntouch®, porting, moving, updating your address, or other general questions.</p></div>
        </div>
    </div>
    <div class="video-wrapper">
        <div class="title-video"><h2>(title here)</h2></div>
        <div class="video"><img src="imgs/video-placeholder.png" alt="video"></div>
        <div class="bg-orange"></div>
        <div class="bg-white-watermark"></div>
        <div class="bg-white"></div>
    </div>

带有万物的CSS框 -

.notice-wrapper {  
height: 400px;    
width: 100%;     
}
.notice-overlay {
display: block;
width: 100%;
height: 400px;
position: relative;
background: rgba(0,0,0,0.8);
left: 0;
z-index: 9999;
color: #fff;
overflow: hidden;
text-align: center;
}
.notices {
display: flex;
width: 809.25px;
height: 288.25px;
text-align: center;
vertical-align: middle;
overflow: hidden;
margin: 0 auto;
position: relative;
transform: translateY(60px)
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
}
.box-left {
flex: 1;
background: #41ad49;
height: 100%;
padding-top: 35px;
}
.box-right {
width: 450px;
background: #40403f;
padding: 25px;
text-align: left;
}

两个按钮和文本的CSS -

.service-wrapper {
width: 100%;
height: 175px;
background-color: #000000;
}
.services {
width: 55%;
display: flex;
margin: 0 auto;
transform: translateY(15px)
-ms-transform: translateY(25px);
-webkit-transform: translateY(15px);

}
.text p {
flex: 1 1 auto;
line-height: 25px;
font-size: 16px;
color: #ffffff;
text-align: left;
align-items: center;
transform: translateY(6px)
-ms-transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.text2 p {
flex: 1 1 auto;
line-height: 25px;
font-size: 16px;
color: #ffffff;
text-align: left;
align-items: center;
transform: translateY(6px)
-ms-transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.button {
flex: 0 0 auto; 
height: 40px;
width: 225px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11; 
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
}
.iconBtn{
max-height: 75%;
max-width: 75%;
}

标题和图像上的CSS -

.title-video h2 {
width: 100%;
position: absolute;
margin: auto 0;
text-align: center;
margin-top: 50px;
transform: translateX(-285px)
-ms-transform: translateX(-285px);
-webkit-transform: translateX(-285px);
}
.video-wrapper {
width: 100%;
margin: auto 0;
text-align: center;
}
.video {
position: absolute;
margin: auto 0;
text-align: center;
width: 100%;

}
.video img {
max-height: 75%;
max-width: 75%;
width: 700px;
height: 393px;
margin-top: 90px;
}

a busy cat

位置在IE 11上不起作用

0 个答案: