浮动图像调整大小浏览器时响应

Question

我在底部浏览器中创建浮动图像.. 但我想，当调整浏览器大小时，这个浮动图像总是会显示..

最大化浏览器时的屏幕截图

调整浏览器大小时的屏幕截图

此浮动图像已消失

这是我的脚本浮动图片

<div class="ads adunit">
<div class="ads adunit"><style type="text/css">
#floating_banner_bottom {
bottom: 0px;
position: fixed;
z-index: 100;
left: 0px;
width: 100%;
text-align: center;
_position:absolute;
_bottom:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}
#floating_banner_bottom { margin-bottom: 0px; bottom: 0 }
#floating_banner_bottom div.close {
width: 100%;
text-align: center;
}
</style>

<div id="floating_banner_bottom" style="z-index: 999; top: 515px;">

<div class="close">
<a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;">
<img src="images/PhoXo2.png" border="0"></a>
</div>

<center>
<table><tbody><tr>
<td><a href="#" data-ajax="false" rel="nofollow" ><img src="images/ads/default/pencarian_beforeloop.jpg" width="100%" height="60"></a></td>
</tr>
</tbody></table>
</center>
</div></div>
</div>

帮助我，谢谢

Answer 1

在你的CSS中试试这个

示例fiddle图片始终位于底部中心。

<强> CSS

#floating_banner_bottom {
bottom: 0px;
position: fixed; //remove
position: absolute; // add
z-index: 100;
left: 0px; // change to left: 50%;
margin-left: -50%; // add
width: 100%; 
text-align: center;
_position:absolute; //remove
_bottom:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight); // remove
}

Answer 2

根据屏幕尺寸使用css

@media (max-width: 960px) {
}

@media (max-width: 767px) {
}

@media (max-width: 480px) {
}