在IE 11和Edge上格式化错误

问题描述 投票:1回答:1

我正在一个其他人从模板开始的网站上工作,所以其中的一切都不是我的。我不是一个网络设计师,但我确实有编码经验。一切都在Firefox和Chrome中完美呈现,并且在Edge中非常接近,但在IE11中却完全错误。

示例:https://imgur.com/a/r4cI0

火狐:

边缘:

Internet Explorer 11:

我似乎无法弄清楚为什么在使用Internet Explorer查看时背景颜色不显示某些方面。我似乎也无法弄清楚为什么文本没有正确浮动,因此它位于图片旁边。在IE 11中查看时,页眉和页脚也显示不正确。

这是HTML,涉及应该在图片旁边的文本:

<aside> 
<h3> Fliteway Technologies</h3>
<p>Your Single Source for Soil and Groundwater Remediation Equipment</p>
<h3><a href="Fliteway Tour.pdf">Take a Tour!</a></h3>
</aside>

这是CSS:

aside {
float: right;
width: 225px;
height: auto;
background-color: #E3E3E3 !important;
background-color: rgba(227, 227, 227, 1);
background:#E3E3E3;
margin-top: 0;
clear: left;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: 0;
margin-bottom: auto;
display: block;
visibility: inherit;

CSS中有一点混乱,因为我一直在尝试解决问题的任何问题。任何建议将非常感谢,因为我真的坚持这一点。

图片HTML:

<sidepicture>
<div class="sidepicture"><img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"></div>
</sidepicture>

图片CSS:

.sidepicture {
display:inherit;
}
html css internet-explorer formatting display
1个回答
1
投票

对于较新的浏览器,我建议使用flex

.wrapper {
  display: flex;
}
aside {
  width: 225px;
  background:#E3E3E3;
}  

sidepicture {
}
<div class="wrapper">
  <sidepicture>
    <div class="sidepicture">
      <img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"></div>
  </sidepicture>
  <aside> 
    <h3> Fliteway Technologies</h3>
    <p>Your Single Source for Soil and Groundwater Remediation Equipment</p>
    <h3><a href="Fliteway Tour.pdf">Take a Tour!</a></h3>
  </aside>
</div>

对于旧版浏览器,我会使用display: table

附注:如果要定位较旧的浏览器,请注意它们可能不支持<sidepicture>等自定义标签

.wrapper {
  display: table;
  width: 100%;
}
aside {
  display: table-cell;
  width: 225px;
  background:#E3E3E3;
  vertical-align: top;
}  

sidepicture {
  display: table-cell;
  vertical-align: top;
}
<div class="wrapper">
  <sidepicture>
    <div class="sidepicture">
      <img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"></div>
  </sidepicture>
  <aside> 
    <h3> Fliteway Technologies</h3>
    <p>Your Single Source for Soil and Groundwater Remediation Equipment</p>
    <h3><a href="Fliteway Tour.pdf">Take a Tour!</a></h3>
  </aside>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.