互联网浏览器不要削减溢出的内容

时间:2014-08-13 11:44:26

标签: javascript jquery html css overflow

我在使用jquery tree pluigin时对IE中的溢出处理感到困惑。 例如:

<!DOCTYPE html>
<html>
<head>
    <!-- start tree configuration -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

    <link rel="stylesheet" href="http://144.76.39.211/scripts/jquery.tree.min.css">
    <script type="text/javascript" src="http://144.76.39.211/scripts/jquery.tree.min.js"></script>

    <style type="text/css">
        div#tree {
            font-size: 75%;
            border: 1px solid Gray;
            width: 300px;
            height: 300px;
            overflow: auto;                
        }
    </style>

    <script type="text/javascript">
        $(document).ready( function(){
            $("#tree").tree();
        });
    </script>

</head>

<body>
    <div id="tree">
        <ul>
            <li>A<ul>
                <li>Alabama</li>
                <li>Alaska</li>
                <li>Arizona</li>
                <li>Arkansas</li>
            </ul></li>
            <li>C<ul>
                <li>Colorado</li>
                <li>Connecticut</li>
            </ul></li>
            <li>D<ul>
                <li>Delaware</li>
            </ul></li>
            <li>F<ul>
                <li>Florida</li>
            </ul></li>
            <li>G<ul>
                <li>Georgia</li>
            </ul></li>
            <li>H<ul>
                <li>Hawaii</li>
            </ul></li>
            <li>I<ul>
                <li>Idaho </li>
                <li>Illinois</li>
                <li>Indiana</li>
                <li>Iowa  </li>
            </ul></li>
                <li>K<ul>
                <li>Kalifornien</li>
                <li>Kansas</li>
                <li>Kentucky</li>
            </ul></li>
            <li>L<ul>
                <li>Louisiana</li>
            </ul></li>
            <li>M<ul>
                <li>Maine </li>
                <li>Maryland</li>
                <li>Massachusetts</li>
                <li>Michigan</li>
                <li>Minnesota</li>
                <li>Mississippi</li>
                <li>Missouri</li>
                <li>Montana</li>
            </ul></li>
            <li>N<ul>
                <li>Nebraska</li>
                <li>Nevada</li>
                <li>New Hampshire</li>
                <li>New Jersey</li>
                <li>New Mexico</li>
                <li>New York</li>
                <li>North Carolina</li>
                <li>North Dakota</li>
            </ul></li>
            <li>O<ul>
                <li>Ohio  </li>
                <li>Oklahoma</li>
                <li>Oregon</li>
            </ul></li>
            <li>P<ul>
                <li>Pennsylvania</li>
            </ul></li>
            <li>R<ul>
                <li>Rhode Island</li>
            </ul></li>
            <li>S<ul>
                <li>South Carolina</li>
                <li>South Dakota</li>
            </ul></li>
            <li>T<ul>
                <li>Tennessee</li>
                <li>Texas </li>
            </ul></li>
            <li>U<ul>
                <li>Utah  </li>
            </ul></li>
            <li>V<ul>
                <li>Vermont</li>
                <li>Virginia</li>
            </ul></li>
            <li>W<ul>
                <li>Washington</li>
                <li>West Virginia</li>
                <li>Wisconsin</li>
                <li>Wyoming</li>
            </ul></li>                
        </ul>
    </div>
</body>

这在Firefox31中有效,但在IE11中看起来很奇怪。 &#39; ul&#39;流过&#39; div&#39;的底部,但它显示滚动条。只有“树”这个效果才能看到。完成了他的工作。没有这个,所有功能都很好!

我在JSFiddle(look here)中尝试了一个示例,但这在两种浏览器中看起来都很好。所以我不知道该怎么做。

所以我的问题是: 如何在每次浏览器使用树插件的同时获取div内容的剪辑,而无需处理复杂的黑客攻击或调整CSS和Javascript?

PS:我是CSS中的菜鸟,我得到的结果最多的是Copy&amp; Paste或Try&amp; Error。 PSS:请原谅我糟糕的英语。

1 个答案:

答案 0 :(得分:0)

我唯一能想到的是使用overflow-y: scroll;来代替自动框。这样内容应该按照你想要的方式滚动。

根据我的理解,auto会做任何浏览器决定是正确的事情,而如果你特意告诉它在y轴上溢出时滚动,它将被迫在所有浏览器中这样做。

希望这有帮助。