我无法在所有浏览器之间正确对齐图像:
我想知道这是否是边界问题?
问题:解决此问题的最佳方法是创建媒体查询吗?现在,我有点想找到一个好的中间立场,但是当在野生动物园移动应用程序中查看时,那几个像素却起了很大的作用。还是有更好的方法在.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2
div之间包含图像?
这是我相关的HTML:
<div id="officials">
<div class='mnhouse'>
<div class="membersublist">
<div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='housemember' class='lcc_gis_member'></div>
<div id='housedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
<div class='mnsenate'>
<div class="membersublist">
<div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='senatemember' class='lcc_gis_member'></div>
<div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
</div>
这是我相关的CSS:
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: relative;
top: -56px;
border:none;
}
.membersublist{
margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
height:87px;
background-color: #e6e6e6;
border-top: 1px solid #a7a5a6;
border-right: 1px solid #a7a5a6;
border-bottom: 1px solid #a7a5a6;
border-left: 3px solid #a7a5a6;
}
这是演示,以防万一我错过任何相关代码(您需要在地图上选择一个点以打开结果)。
问题是您使用否定的相对定位来尝试将其对齐。
#officials img {
...
position: relative;
top: -56px;
...
}
基本上,您将其相对于文本创建的偏移量进行定位,在所有浏览器中,文本都永远不能被认为是100%一致的。
而是考虑在.mnhouse
包装器上添加定位,然后使用绝对定位来定位图像。
.mnhouse {
position: relative;
}
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: absolute;
top: 0;
border:none;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句