所以我正在为一个实时绘图区编写一个脚本。目前这项工作正在进行中,但这是该区域的 CSS:
#canvas{
background-repeat: no-repeat;
cursor:none;
overflow:hidden !important;
margin-top:50px;
width:400px;
height:300px;
border:1px #000 solid;
}
现在很明显,在 overflow:hidden
上使用 important
标签,400x300 框外与绘图有关的任何内容都不应显示,但会显示!!!
here is a jsfiddle这样你就可以看到所有的代码了!
如何理解我的意思:
只需单击顶部的画笔,然后按照 p
标记中的说明进行绘图。然后走出盒子,看看它是如何继续绘制的。
注意:
我使用 $('#canvas').prepend(content)
将绘图放入绘图区域,因此它会出现在绘图区域之外的区域是没有意义的溢出:隐藏
。有什么想法吗?
最佳答案
很奇怪,但它有帮助:将 position:relative
添加到 #canvas
样式表:
#canvas {
/* ... */
position: relative;
/* ... */
}
(JSFiddle:http://jsfiddle.net/HEnuj/7/)
我不是 CSS 专家,所以我没有合乎逻辑的解释,除了类似“如果某些元素相对于它们的父元素具有 position:absolute
因此父元素必须是 position:relative
",这就是我记得的。
关于javascript - css 溢出无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17258791/