相关疑难解决方法(0)

考虑这个例子:

http://jsfiddle.net/treeface/P8JbW/

HTML:

<div id="test">
    <img src="http://ycombinator.com/images/y18.gif" />
</div>

CSS:

#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    overflow-x:visible;
    overflow-y:hidden;
}
img {
    position:absolute;
    left:-11px;
}

我期待看到这个:

但是我得到了这个:

看来overflow-x属性在这里被覆盖了.这是真的发生了什么？假设我必须将overflow-y设置为隐藏,是否有解决此问题的方法？

我有这个简单的HTML和CSS http://jsfiddle.net/JVfVv/1/

问题是文本正在mac下的safari/chrome/firefox下被裁剪.删除溢出:隐藏可以解决问题,但是由于其他原因,此行是必需的.删除行高:1; 似乎解决了这个问题,但是我从我的重置样式表中得到了这个,并且我没有解释为什么它会导致裁剪.

有人可以解释为什么会这样,以及如何解决它？谢谢