IE 11 和 Edge 上的格式错误

Question

我正在开发一个其他人从模板开始的网站，因此其中的所有内容都不是我的。我不是专业的网页设计师，但我确实有编码经验。一切都在 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;
}

Answer 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>