我目前正在创建一个目标网页,我似乎无法弄清楚代码中的问题。特别是在特定div的定位上。它在IE中正确显示但是当我打开它到chrome时它没有正确定位。有没有办法可以让它在每个浏览器中看起来都一样?因为当我在Chrome浏览器中编辑定位时,它甚至没有移动一点。根据下面的代码,处于错误位置的div是id =“selfService”。
PS:我试图编辑css文件,似乎底部:90%;在#selfService中没有在Chrome浏览器上工作,它正在IE浏览器上工作。为什么Chrome浏览器没有应用底部:90%;码?
sec_policy
#container5 {
margin: auto;
width: 100%;
background-repeat: no-repeat;
height: 25em;
border-bottom: 3em solid #0175c9;
}
#bigcontainer {
height: 48em;
}
#maincontainer {
width: 36%;
height: 44em;
background-color: deepskyblue;
margin-left: 1.5%;
}
#upcomingActivitiesTitle {
text-align: center;
color: white;
font-size: 25pt;
font-family: arial;
letter-spacing: 2px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px
white;
position: relative;
top: 10%;
}
#container {
width: 90%;
height: 25em;
margin-left: 5%;
overflow: hidden;
position: relative;
top: 15%;
}
#subcontainer {
position: relative;
width: 100%;
height: 25em;
margin: auto;
}
#patching {
width: 80%;
margin: auto;
background-color: #234090;
padding: 0.1em;
color: white;
text-align: center;
font-family: arial;
font-size: 22pt;
}
#patchingDesc {
width: 80%;
margin: auto;
color: white;
font-family: arial;
}
#networkMaintenance {
width: 80%;
margin: auto;
background-color: #234090;
padding: 0.1em;
color: white;
text-align: center;
font-family: arial;
font-size: 22pt;
}
#networkMaintenanceDesc {
width: 80%;
margin: auto;
color: white;
font-family: arial;
}
#container #subcontainer {
animation: slide 13s 2s infinite;
}
@keyframes slide {
0% {margin-top: 0;}
10% {margin-top: -10em;}
20% {margin-top: -17em;}
30% {opacity: 1;}
40% {margin-top: -30em;}
41% {opacity: 0;}
61% {opacity: 0;}
62% {opacity: 1;}
63% {margin-top: 24em;}
80% {margin-top: 17em;}
90% {margin-top: 10em;}
100% {margin-top: 0;}
}
#clickMore {
position: relative;
display: inline;
background-color: #0098cc;
border-radius: 7px;
font-family: arial;
color: white;
font-size: 14pt;
padding: 0.1em;
float: right;
right: 15%;
top: 15%;
}
#clickMore > a {
color: white;
text-decoration: none;
font-family: arial;
}
#tutorialVideos {
display: inline-block;
position: relative;
height: 10em;
width: 55%;
border-radius: 5px;
bottom: 44em;
text-align: center;
margin-left: 41%;
line-height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/VideoBanner.jpg");
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
}
#calendar {
display: inline-block;
position: relative;
height: 10em;
width: 55%;
border-radius: 5px;
bottom: 43em;
text-align: center;
margin-left: 41%;
line-height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/CentralizedCalendar.jpg");
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
}
a > #calendar {
text-decoration: none;
color: deepskyblue;
}
#selfService {
display: inline-block;
position: relative;
height: 21em;
width: 55%;
bottom: 90%;
text-align: center;
font-family: arial;
margin-right: 3%;
float: right;
}
#titleSelfService {
text-align: center;
font-family: arial;
font-size: 22pt;
}
#howto {
display: inline-block;
position: relative;
float: left;
width: 25%;
font-size: 15pt;
margin-left: 19%;
}
#hpsm {
display: inline-block;
position: relative;
float: left;
width: 25%;
font-size: 15pt;
margin-left: 11%;
}
#imghowto {
width: 100%;
height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/HowTo.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
#imghpsm {
width: 100%;
height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/HPSM.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
#hpsm > a {
text-decoration: none;
color: black;
}
#howto > a {
text-decoration: none;
color: black;
}
答案 0 :(得分:0)
您希望#selfService
显示的确切程度的一个示例将是理想的。
您使用的是bottom
和其余部分的em单位的百分比,它的父级也设置了height
。
#selfService
bottom
。
#container5 {
margin: auto;
width: 100%;
background-repeat: no-repeat;
height: 25em;
border-bottom: 3em solid #0175c9;
}
#bigcontainer {
height: 48em;
}
#maincontainer {
width: 36%;
height: 44em;
background-color: deepskyblue;
margin-left: 1.5%;
}
#upcomingActivitiesTitle {
text-align: center;
color: white;
font-size: 25pt;
font-family: arial;
letter-spacing: 2px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
position: relative;
top: 10%;
}
#container {
width: 90%;
height: 25em;
margin-left: 5%;
overflow: hidden;
position: relative;
top: 15%;
}
#subcontainer {
position: relative;
width: 100%;
height: 25em;
margin: auto;
}
#patching {
width: 80%;
margin: auto;
background-color: #234090;
padding: 0.1em;
color: white;
text-align: center;
font-family: arial;
font-size: 22pt;
}
#patchingDesc {
width: 80%;
margin: auto;
color: white;
font-family: arial;
}
#networkMaintenance {
width: 80%;
margin: auto;
background-color: #234090;
padding: 0.1em;
color: white;
text-align: center;
font-family: arial;
font-size: 22pt;
}
#networkMaintenanceDesc {
width: 80%;
margin: auto;
color: white;
font-family: arial;
}
#container #subcontainer {
animation: slide 13s 2s infinite;
}
@keyframes slide {
0% {
margin-top: 0;
}
10% {
margin-top: -10em;
}
20% {
margin-top: -17em;
}
30% {
opacity: 1;
}
40% {
margin-top: -30em;
}
41% {
opacity: 0;
}
61% {
opacity: 0;
}
62% {
opacity: 1;
}
63% {
margin-top: 24em;
}
80% {
margin-top: 17em;
}
90% {
margin-top: 10em;
}
100% {
margin-top: 0;
}
}
#clickMore {
position: relative;
display: inline;
background-color: #0098cc;
border-radius: 7px;
font-family: arial;
color: white;
font-size: 14pt;
padding: 0.1em;
float: right;
right: 15%;
top: 15%;
}
#clickMore>a {
color: white;
text-decoration: none;
font-family: arial;
}
#tutorialVideos {
display: inline-block;
position: relative;
height: 10em;
width: 55%;
border-radius: 5px;
bottom: 44em;
text-align: center;
margin-left: 41%;
line-height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/VideoBanner.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
#calendar {
display: inline-block;
position: relative;
height: 10em;
width: 55%;
border-radius: 5px;
bottom: 43em;
text-align: center;
margin-left: 41%;
line-height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/CentralizedCalendar.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
a>#calendar {
text-decoration: none;
color: deepskyblue;
}
#selfService {
display: inline-block;
position: relative;
height: 21em;
width: 55%;
bottom: 62em;
text-align: center;
font-family: arial;
margin-right: 3%;
float: right;
}
#titleSelfService {
text-align: center;
font-family: arial;
font-size: 22pt;
}
#howto {
display: inline-block;
position: relative;
float: left;
width: 25%;
font-size: 15pt;
margin-left: 19%;
}
#hpsm {
display: inline-block;
position: relative;
float: left;
width: 25%;
font-size: 15pt;
margin-left: 11%;
}
#imghowto {
width: 100%;
height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/HowTo.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#imghpsm {
width: 100%;
height: 10em;
background-image: url("http://itcommunicator/infraops/servicedesk/eoc/SiteAssets/LandingPage/HPSM.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#hpsm>a {
text-decoration: none;
color: black;
}
#howto>a {
text-decoration: none;
color: black;
}
<div id="bigcontainer">
<div id="maincontainer">
<div id="upcomingActivitiesTitle">Upcoming Activities</div>
<div id="container">
<div id="subcontainer">
<br/>
<br/>
<div id="patching">Unix Patching 2.0</div>
<div id="patchingDesc">
<b>The Unix Team will have a 5- hour regular maintenance on Sunday, 23
April 2017 starting 08:00 AM ET. There will be no user disruption during this
activity</b></div>
<br/>
<br/>
<br/>
<div id="networkMaintenance">Network Maintenance</div>
<div id="networkMaintenanceDesc">
<b>The Unix Team will have a 5-hour regular maintenance on Sunday, 23
April 2017 starting 08:00AM ET. There will be no user disruption during this
activity.</b></div>
</div>
</div>
<div id="clickMore">
<a href="#">Click More</a></div>
</div>
<a id="tutorialsa" href="#">
<div id="tutorialVideos"> </div>
</a>
<a id="calendara" href="#">
<div id="calendar"> </div>
</a>
<div id="selfService">
<br/>
<br/>
<div id="titleSelfService">Self Service</div>
<br/>
<div id="howto">
<a id="howtoa" href="#">How To
<div id="imghowto"> </div></a> </div>
<div id="hpsm">
<a id="hpsma" href="#">HPSM
<div id="imghpsm"> </div></a> </div>
</div>
</div>