在IE 11和Edge上格式化错误

Question

因此，我正在从其他人开始使用模板的网站上工作，因此并非所有内容都是我的。我不是贸易的网页设计师，但我确实有编码经验。所有内容在Firefox和Chrome中完美显示，并且在Edge中完美无瑕，但在IE11中却完全错误。

例子：https://imgur.com/a/r4cI0

火狐：

边缘：

的Internet Explorer 11：

我似乎无法弄清楚为什么背景颜色不显示某些方面时，用Internet Explorer查看。我似乎也无法弄清楚为什么文本不能正确地浮动，因此它位于图片旁边。

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

在IE中观察时11.

下面是涉及该被认为是下一个到图片中的文字的HTML页眉和页脚也显示不正确

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>