Question

我正在尝试将overflow属性应用于<object/>元素。这可能吗？

问题的一个例子是：JSFiddle。在Chrome中，似乎忽略了溢出。我怎样才能解决这个问题？

HTML

<body>
    <object id="my-object" data="http://www.rfc-editor.org/rfc/rfc1.txt"></object>
</body>

CSS

#my-object {
    height : 500px;
    width : 300px;
    overflow : hidden;
}

Answer 1

<object>等数据对象没有溢出属性。你可以自己检查一下，进入浏览器的检查员，转到obj#my-object属性并查找overflow（它不在那里）

结果，通过将滚动条放在一个容器中并使父项比子项小一些约20px来隐藏滚动条。然后，您可以使用另一个具有相同文本元素宽度和高度的元素，并将其覆盖以防止滚动。总而言之，looks like this

<body scroll="no">
    <div class='container'>
        <object id="my-object" data="http://www.rfc-editor.org/rfc/rfc1.txt">
        </object>
        <div class='preventScroll'></div>
    </div>
</body>

.container { 
    width:300px; height:500px; 
    overflow:hidden; 
    position:relative; 
}
.preventScroll { 
    width:100%; height:100%; 
    position:absolute; top:0; left:0; 
}
#my-object {
    height: 100%;
    width: 320px;
    position:relative;
}

话虽如此，我建议使用更现代的<iframe>代替

Answer 2

#object {
    height : 500px;
    width : 300px;
    overflow : hidden;
}

删除hidden

周围的引号

Answer 3

请勿使用关键字对象。将其更改为

<body scroll="no">
    <object id="mycontent" data="http://www.rfc-editor.org/rfc/rfc1.txt">
    </object>
</body>


#mycontent {
    height : 500px;
    width : 300px;
    overflow : hidden;
}

HTML Object标签删除滚动条溢出

3 个答案: