Меня смущает обработка переполнения в IE при использовании плагина дерева jquery. Пример:
<!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. 'Ul' проходит по нижней части 'div', но показывает полосу прокрутки. Этот эффект виден только в том случае, если «дерево» сделало свою работу. Без этого все в порядке!
Я пробовал пример в JSFiddle (смотрите здесь), но это выглядит нормально в обоих браузерах. Так что я не знаю, что делать.
Итак, мой вопрос: как я могу получить обрезку содержимого div при использовании древовидного плагина, работающего каждый раз и в каждом браузере, без использования сложных хаков или настроек CSS и Javascript?
PS: Я новичок в CSS, и большинство результатов, которые я получаю, - это Copy & Paste или Try & Error. PSS: Простите за плохой английский.
1 ответ
Единственное, что я могу придумать, это использовать overflow-y: scroll; для коробки вместо авто. Таким образом, контент должен прокручиваться так, как вы хотите.
Насколько я понимаю, auto будет просто делать то, что браузер считает правильным, в то время как если вы специально укажете ему прокрутку при переполнении по оси Y, он будет вынужден делать это во всех браузерах.
Надеюсь это поможет.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.