IE 和 Firefox 中的 CSS 图像缩放答案

【问题标题】：CSS Image Scaling in IE and FirefoxIE 和 Firefox 中的 CSS 图像缩放
【发布时间】：2010-12-31 18:19:14
【问题描述】：

我在 Internet Explorer 和 Firefox 上遇到了一个奇怪的 CSS 格式问题。对于导航栏，我有几张图像要显示在一个列中，并带有背景图像。为此，我在页面上放置了背景图片，然后在其中创建了一个 div 来保存每个图片链接，并使用 CSS 来格式化每个图片。在 Safari 中运行良好，但在 IE 和 Firefox 中，图像无法缩放到适合背景图像所需的大小。

我页面中的相关 CSS 在这里：

.nav_background_home{
width:17%;
position:absolute;
left:56%;
top:31%;
z-index:100;}


.nav_background_home .nav_items{
position:absolute;
top:8%;
z-index:150;}


img.nav_item{
margin-bottom:3.75%;
height:4.4%;
margin-left:7%;}

然后我在 HTML 中添加了所有内容：

<div class="nav_background_home"><img src="nav_background.png" width=100% />
<div class="nav_items">
    <img src="nav_items/set_design.png" class="nav_item" height=100% />
    <img src="nav_items/company_report.png" class="nav_item" height=100% style="height:4.1%;"/>
    <img src="nav_items/prompt_pages.png" class="nav_item" height=100% />
    <img src="nav_items/characters.png" class="nav_item" height=100% />
    <img src="nav_items/costumes.png" height=100% class="nav_item" style="margin-bottom:2%;" />
    <img src="nav_items/video.png" height=100% class="nav_item" style="height:4.1%;" />

</div>

这在 Safari 中完美运行，但在 Firefox 和 IE 中，图像无法缩放。我已经尝试从 HTML 中删除“height=100%”，但这并没有改变任何东西。该网站在这里，如果有帮助的话：http://gilmannews.com/rishi/sandbox.html。

谢谢！

【问题讨论】：

到底是什么问题？什么应该适合什么？

标签： html css internet-explorer firefox safari

【解决方案1】：

应该是 height="100%" 和 width="100%" 试试看。

另外，尝试通过http://validator.w3.org/check运行它

这将向您展示一些浏览器可能很好处理但其他浏览器不会处理的各种小问题

【讨论】：