无法强制溢出-x: visible

Question

我有一个具有以下风格的容器：

overflow-y:auto;
overflow-x:visible;
position:relative;

在里面我有一个带有以下样式的表格：

position:relative;

由于某种原因，我仍然看到两个滚动条(x和y)。我不能强迫x滚动条消失。我现在不能把它放在小提琴上，因为有很多脚本等等，但我很快就会做的。无论如何，当我在chrome中检查容器时，它有overflow-x: visible，并且滚动条是可见的--这怎么可能？

编辑

这是fiddle：http://jsfiddle.net/Ncd2Y/1/为什么x滚动条是可见的？

伙计们，我想让内容在x轴上可见。内容必须可见(容器外部)，滚动条不可见...

Answer 1

它是可见的，因为它的css属性是可见的

.css({"overflow-y":"hidden","overflow-x":"hidden"});

将删除所有滚动条。

你的css：

#container {
background:green;

width:100px;
height:100px;
display:block;
overflow-y:auto;
overflow-x:hidden;

}​

为了实现您的最终目标，您应该从容器中排除该表，并将其绝对定位在上面，并将其z索引到比该表更低的位置:请参阅您更新的小提琴：

http://jsfiddle.net/Ncd2Y/2/

您的变通方法css

#container {
background:green;
position:absolute;
width:100px;
height:100px;
display:block;
overflow-y:auto;
overflow-x:hidden;
word-wrap: break-word;
z-index: -10;

}​

和worarround html：

  <div id="container">

</div>
 <table id="table">
        <tbody>
            <tr>
                <td>column</td>
                <td>column</td>
                <td>column</td>
                <td>column</td>
                <td>column</td>
                <td>column</td>
            </tr>
        </tbody>            
    </table>
​

Answer 2

overflow-x: visible将使内容可见。overflow-x: hidden会把它藏起来

Answer 3

overflow-x:hidden; 

将会解决问题..