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

时间：2017-05-26 23:45:55

标签： html css google-chrome

我目前正在创建一个目标网页，我似乎无法弄清楚代码中的问题。特别是在特定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;
}

1 个答案:

答案 0 :(得分：0)

您希望#selfService显示的确切程度的一个示例将是理想的。

您使用的是bottom和其余部分的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>

相关问题
最新问题