Граница области просмотра документа IE - PullRequest
Новая
       3

Граница области просмотра документа IE

3 голосов
/ 30 октября 2010

В некоторых версиях IE имеется тонкая граница размером 2 пикселя, окружающая порт просмотра документа.Я еще не заметил этого для других браузеров.Это создает небольшую проблему при расчете позиций мыши для страницы и клиентских областей.Первоначально я просто вычитал 2 из каждого вычисления, чтобы учесть границу.

Но потом, когда я тестировал его в разных версиях IE и разных программах встраивания IE, я заметил, что в некоторых случаяхбез границ.Итак, простая проверка IE и вычитание 2. не обрежут его.

Есть ли способ получить границу порта просмотра документа в IE?

Example1: определение положения мыши внутри объекта 

<html>
<head>
    <script>
        var isIE = (!window.addEventListener);
        window.onload = function(){
            var foo = document.getElementById('foo');
            if (isIE) foo.attachEvent('onmousemove',check_coords);
            else foo.addEventListener('mousemove',check_coords,false);
        }
        function check_coords(e){
            var foo = document.getElementById('foo');
            var objPos = getPos(foo);
            if (isIE) mObj = [window.event.clientX+document.body.scrollLeft-objPos[0], window.event.clientY+document.body.scrollTop-objPos[1]];
            else mObj = [e.pageX-objPos[0], e.pageY-objPos[1]];
            foo.innerHTML = mObj;
        }
        function getPos(obj){
            var pos = [0,0];
            while (obj.offsetParent){
                pos[0] += obj.offsetLeft;
                pos[1] += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return pos;
        }
    </script>
    <style>
        body{
            margin:0px;
            padding:0px;
        }
        #foo{
            border:3px solid black;
            position:absolute;
            left:30px;
            top:52px;
            width:300px;
            height:800px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div id='foo'>Test test</div>
</body>
</html>

При координате [0,0] Internet Explorer (тот, у которого есть граница) возвращает [2,2]

Пример 2: получение ширины полосы прокрутки 

alert(screen.width-document.body.clientWidth);

При ширине полосы прокрутки 17px Internet Explorer (версии с рамкой) возвращает 21px, не учитывая границы в 2px с каждой стороны.

UPDATE: Итак, я думаю, что на самом деле был стилем по умолчанию, который применяется к тегу body.Извините ребята!Первоначально я сделал document.body.style.borderWidth, чтобы проверить, был ли это стиль CSS.Но пару минут назад я только что понял, что должен был сделать document.body.currentStyle['borderWidth'].Это возвращает medium.Таким образом, для правильного получения границы окна просмотра без изменения страницы (это ТОЛЬКО относится к вычислениям IE), вам нужно будет использовать .currentStyle['borderWidth'].Сценарий, кажется, работает во всех других браузерах, кроме IE, без выполнения проверки границы (насколько я проверял).Кроме того, вам нужно только проверить для borderWidth в IE-padding или поле не имеет значения.Кроме того, при вычитании ширины границ убедитесь, что вы проверяете borderTopWidth И borderLeftWidth.

В любом случае, я присудил Сэмюэлю награду, так как он первым упомянул, что это может быть по умолчаниюстиль браузера.

Ответы [ 4 ]

2 голосов
/ 30 октября 2010

Вы уверены, что это не стиль тега body?Я знаю, что в некоторых браузерах есть стиль по умолчанию для тега body.Чтобы быть в безопасности, я всегда помещаю 

body{
    padding:0px;
    margin:0px;
}

в мою таблицу стилей

0 голосов
/ 17 января 2012

У меня была такая же проблема.Вот решение, которое я нашел: document.body.clientLeft обычно равно нулю, но когда в окне просмотра IE есть вставки, оно равно 2. Таким образом, вы можете вычесть это значение из координат события. 

var x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
var y = e.clientY + document.body.scrollTop - document.body.clientTop;
0 голосов
/ 01 декабря 2010

function getPos(obj){

var pos = [0,0];

while (obj.offsetParent){

pos[0] += obj.offsetLeft-1;

pos[1] += obj.offsetTop-1;

obj = obj.offsetParent;

}

return pos;

}

</script>

<style>

body{ margin:0; padding:0; border:none; outline:none; }

#foo{ border:3px solid #000; position:absolute; top:50px; left:50px; margin:0; padding:0;<br> outline:none; width:300px; height:800px; background-color:yellow; } </style>

</head>

<body>

<div id='foo'>Test test</div>

</body> </html>

0 голосов
/ 08 ноября 2010

Для лучшей кросс-браузерной согласованности вы должны попытаться использовать некоторые настройки CSS, такие как Эрик Майер, сброс CSS или какой-нибудь современный внешний интерфейс, такой как HTML5 Boilerplate .

...