我正在一个其他人从模板开始的网站上工作,所以其中的一切都不是我的。我不是一个网络设计师,但我确实有编码经验。一切都在Firefox和Chrome中完美呈现,并且在Edge中非常接近,但在IE11中却完全错误。
火狐:
边缘:
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;
}
对于较新的浏览器,我建议使用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>