为什么我的 CSS 和 HTML 不能在 IE 和 Chrome 中正确呈现答案

【问题标题】：Why won't my CSS and HTML render properly in IE and Chrome为什么我的 CSS 和 HTML 不能在 IE 和 Chrome 中正确呈现
【发布时间】：2017-05-27 08:36:02
【问题描述】：

我目前正在创建一个登录页面，但我似乎无法弄清楚我的代码中存在什么问题。特别是关于特定 div 的定位。它在 IE 中正确显示，但是当我将它打开到 chrome 时，它的位置不正确。有没有办法让它在每个浏览器中看起来都一样？因为当我在 Chrome 浏览器中编辑定位时，它甚至不会移动一点。根据 div 下面的代码，在错误的位置是 id="selfService"。

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">&#160;</div></a><a id="calendara" href="#">
      <div id="calendar">&#160;</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">&#160;</div></a> </div>
      <div id="hpsm">
         <a id="hpsma" href="#">HPSM 
            <div id="imghpsm">&#160;</div></a> </div>
   </div>
</div>

【问题讨论】：

永远，永远不要使用 IE 作为事情应该如何工作的参考。地球上最糟糕的浏览器，它不完整且不符合标准。始终，始终使用任何其他浏览器首先验证您的标记看起来是否如您所愿。然后，然后才看看 IE 如何彻底搞砸一切并尝试修复 IE。不是相反！
听起来不像是咆哮，但完全同意 Rob。
看起来像浮动加 inline-block 显示在 #selfService 元素上导致 Chrome 忽略定位。删除它们似乎至少可以让bottom 风格受到尊重——尽管你需要找到一种不同的方法来实现右侧对齐。
我的坏 Rob，我认为这是我忽略的事情。我只在 IE 中这样做，因为我们公司的大多数人都使用 IE 作为他们的主要浏览器。感谢 Syden 和 Nate 的回答，我得到了我想要的输出。

标签： html css google-chrome

【解决方案1】：

您希望#selfService 显示的确切方式是理想的示例。

您在 bottom 上使用百分比，在其余部分使用 em 单位，它的父级在 em 上也设置了 height。

尝试使用 em 单位调整 #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">&#160;</div>
  </a>
  <a id="calendara" href="#">
    <div id="calendar">&#160;</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">&#160;</div></a> </div>
    <div id="hpsm">
      <a id="hpsma" href="#">HPSM 
            <div id="imghpsm">&#160;</div></a> </div>
  </div>
</div>

【讨论】：