图像平铺导致某些浏览器忽略溢出约束

时间:2016-01-14 00:19:54

标签: overflow

我创建了一组小的PNG文件来拥抱我网站的顶部和底部。通过在X轴上重复它们,它们跨越站点的整个宽度,并通过浏览器主动收缩和扩展。这是预测的,直到上跨度被推到右边,允许另一个图像(徽标/按钮)占据左上角。这个重复的图像和横幅标识是一个连续的图像,所以我尽我所能使其按设计工作。我将这个位添加到我的样式表中,将重复的图像轻推到右边:

    left:650px; 

这会导致出现一个水平滚动条,允许访问我网站右侧的大开空(看起来PNG被推到的距离相同)。我相信这叫做溢出?为了限制溢出,我将以下内容添加到样式表中的html,body标记:

    width: 100%;
    overflow-x: hidden;

这会删除我测试的所有浏览器(Chrome,IE,FF和Opera)中的滚动条,但在大多数情况下,仍然可以通过单击鼠标中键并激活来调用侧滚动简单滚动功能(我不知道此功能的实际名称,但希望您理解我的意思)。

FF取消激活此鼠标功能,但仍允许使用键盘箭头滚动。 IE是唯一正常工作的浏览器。

我已经全神贯过地寻找答案,但只提供了一些可能的解决方案,但我不了解如何实施甚至如何描述它们。作为一个新手我怀疑不正确的术语也阻碍了我的搜索。无论如何,如果你看看我的网站:

http://www.cybergolem.com/indexWIP.php

顺便说一下,我的div嵌套看起来像这样:

<body>
    <div id="container">
        <a class="homebutton" href="index.php">Home Page</a>
        <div id="header"></div>
    </div>
    <div id="footer"> 
        <div id="footNote"> — Thar Be Dragons Here — </div>
    </div>
</body>

非常感谢。

0 个答案:

没有答案