html - IE 11 和 Edge 格式错误

Question

我在一个网站上工作，该网站是其他人从模板开始的，因此其中并非所有内容都是我的。我不是专业的网页设计师，但我确实有编码经验。一切都在 Firefox 和 chrome 中完美显示，在 Edge 中近乎完美，但在 IE11 中却完全错误。

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

火狐:

边缘:

互联网浏览器 11:

我似乎无法弄清楚为什么在使用 Internet Explorer 查看时背景颜色不显示某些方面。我似乎也无法弄清楚为什么文字没有正确 float ，所以它位于图片旁边。在 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>