DIV在Internet Explorer中脱落屏幕

时间:2017-05-11 02:03:34

标签: html css internet-explorer

这是我第一次来这里,所以请放轻松我。我已经在我的一个模块中在大学里做了几个月的编码,我刚刚完成一个项目并开始在不同的浏览器上测试它。对于Internet Explorer上的一个页面,它都运行得相当顺利。

在下面的图片中,您会看到应该在“公众观察”下面的文字。和'会议'部分移到屏幕边缘并在Internet Explorer中掉线。

Image of Chrome vs Internet Explorer Display of Website

我一直在谷歌搜索超过一个小时没有运气,我希望你们中的一些天才能够帮助我!

以下是关于这些元素的一些HTML和CSS。非常感谢你对这个问题有所了解!



.observing {
  text-align: left;
  font-size: 30px;
  width: 21%;
  padding-bottom: 2%;
}

.observingp {
  text-align: left;
  font-size: 17px;
  width: 40%;
  align-content: left;
  float: left;
}

.meetings {
  text-align: left;
  font-size: 30px;
  width: 21%;
  padding-bottom: 2%;
  margin-left: 42.5%;
  margin-top: -5%;
}

.meetingsp {
  text-align: left;
  font-size: 17px;
  width: 30%;
  align-content: left;
  float: left;
  margin-left: 3%;
}

<div id="activities-info">

  <div id="public-observing">

    <h4 class="observing">Public Observing</h4>

    <p1 class="observingp">
      Public Observing takes place at ‘The New Inn’ at Eccup (LS168AU). Sessions are held regularly during most months, however they stop over Summer when the sunset is too late. Start times vary according to the sunset, and inconsistent dates are due to avoiding
      the full moon, which makes observing difficult.
      <br><br> Please dress warmly, as observing takes place on an open field. Also, ensure that all children are supervised by a responsible adult. The Society cannot be responsible for accidents on the field.
    </p1>
  </div>

  <div id="meetings">

    <h4 class="meetings">Meetings</h4>
    <p1 class="meetingsp">
      Meetings are held on the second Wednesday of each month at the Quaker Meeting House (LS29DX) between 7pm and 10pm. Meetings usually involve a lecture or presentation of an astronomical topic given by guest speakers or society members. <br><br> Informal
      meetings take place two weeks later, on Wednesdays. Here members have an opportunity to express and discuss their interests with personal presentations.
    </p1>

  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

我建议使用normalize.css - 这是一个让所有borwsers一致地呈现页面的项目。只需将它作为另一个css befoer包含在您自己的css文件中,您将在所有浏览器上获得silmilar结果。 https://necolas.github.io/normalize.css/