Question

我在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。

谢谢！

Answer 1

应该是height =“100％”和width =“100％”尝试启动。

另外，请尝试通过http://validator.w3.org/check

运行它

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

IE和Firefox中的CSS图像缩放

1 个答案: