-1
我目前正在创建一个登录页面，我似乎无法弄清楚我的代码中存在什么问题。特别是关于特定div的定位。它在IE中正确显示，但是当我打开它铬时，它没有正确定位。有没有一种方法可以让它在每个浏览器中看起来都一样？因为当我在Chrome浏览器中编辑定位时，它甚至不会移动。根据下面的代码，位于错误位置的div是id =“selfService”。为什么我的CSS和HTML在IE和Chrome中无法正确呈现
PS：我试图编辑CSS文件，它似乎是底部：90％;在#selfService不能在chrome浏览器上工作，并且它在IE浏览器上工作。为什么Chrome浏览器不能应用底部：90％;码？
#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;
}<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>
永远不要使用IE浏览器的事情应该如何工作的参考。这个星球上浏览器最糟糕，它不完整，不符合标准。总是，总是使用任何其他浏览器来首先验证您的标记看起来，如你所愿。然后，只有看看如何IE浏览器皇家螺丝一切，并试图修复IE浏览器。不是相反！ – Rob
不像听起来那么激动人心，但与罗布不同意。 – Syden
看起来像'＃selfService'元素上的float plus'inline-block'显示导致Chrome忽略定位。删除它们两者似乎至少得到了“底部”风格的尊重 - 尽管如此，你需要找出一种不同的方法来实现右侧对齐。 –