Как мне избавиться от пробела, оставленного относительным положением div в Firefox? - PullRequest
Новая
       0

Как мне избавиться от пробела, оставленного относительным положением div в Firefox?

0 голосов
/ 11 декабря 2010

Моя основная идея - просто использовать div для выделения линий.

Для IE это прекрасно работает. Однако в ФФ у меня проблема. Существуют ли стандартные способы, которыми люди используют эту функцию?

Мне нужно переключить div подсветки на относительный, чтобы позиционирование работало в FF, но затем перед первой строкой появляется дополнительный пробел, когда строка выделяется.

Я надеюсь, что у некоторых экспертов CSS / JavaScript есть обходной путь. Кроме того, если есть какой-то нормальный способ сделать это, дайте мне знать. Я буду использовать это.

Вот пример кода: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    
        function firstChildC(startNode)
        {
            var nextNode = startNode.firstChild;

            while(nextNode.nodeType != 1)  //loop until it is an actual tag, not white space
                nextNode = nextNode.nextSibling;

            return nextNode;
        }

        var bFirefox = false;

        if (navigator.userAgent.indexOf("Firefox") != -1)
            bFirefox = true;

        function highlightPosition(event)
        {
            //gets the td that holds the pre tag, which holds the data
            var preTag;
            if(bFirefox)
                preTag = event.target;
            else
                preTag = event.srcElement;

            var containerOfPreTag = preTag.parentNode;
            var lineCountTD = firstChildC(containerOfPreTag.parentNode);
            var numLines = parseInt(lineCountTD.innerHTML);
            var lineHeight = preTag.offsetHeight/numLines;

            //find line to highlight
            var currentLine;
            if(bFirefox)
                currentLine = parseInt(event.layerY / lineHeight);
            else
                currentLine = parseInt(event.offsetY / lineHeight);

            //highlight line
            var highlighterDiv = firstChildC(containerOfPreTag);
            highlightLine(highlighterDiv,0,containerOfPreTag.offsetWidth, (lineHeight*currentLine), lineHeight);

            return 0;
        }

        function highlightLine(highlighterDiv, left, width, top, height)
        {
            highlighterDiv.style.display = "block";
            if(bFirefox)
                highlighterDiv.style.position = "relative";

            highlighterDiv.style.left = left+"px";
            highlighterDiv.style.width = width+"px";
            highlighterDiv.style.top = top+"px";
            highlighterDiv.style.height = height+"px";
        }
    



    
        
            
                
                    22
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image 
THIS IS PAGE 01. LINE 01.
THIS IS PAGE 01. LINE 02.
THIS IS PAGE 01. LINE 03.
THIS IS PAGE 01. LINE 04.
THIS IS PAGE 01. LINE 05.
THIS IS PAGE 01. LINE 06.
THIS IS PAGE 01. LINE 07.
THIS IS PAGE 01. LINE 08.
THIS IS PAGE 01. LINE 09.
THIS IS PAGE 01. LINE 10.
THIS IS PAGE 01. LINE 11.
THIS IS PAGE 01. LINE 12.
THIS IS PAGE 01. LINE 13.
THIS IS PAGE 01. LINE 14.
THIS IS PAGE 01. LINE 15.
THIS IS PAGE 01. LINE 16.
THIS IS PAGE 01. LINE 17.
THIS IS PAGE 01. LINE 18.
THIS IS PAGE 01. LINE 19.
THIS IS PAGE 01. LINE 20.
THIS IS PAGE 01. LINE 21.
THIS IS PAGE 01. LINE 22.

Ответы [ 4 ]

1 голос
/ 11 декабря 2010

Пытался заставить это работать здесь: http://jsfiddle.net/bemace/Kg2Ag/4/, но это беспорядок.

Это выглядит как более разумный подход: (демо в http://jsfiddle.net/bemace/DBQFW/)

<ul class="code">
<li>THIS IS PAGE 01. LINE 01.</li>  
<li>THIS IS PAGE 01. LINE 02.</li>
<li>THIS IS PAGE 01. LINE 03.</li>
<li>THIS IS PAGE 01. LINE 04.</li>
<li>THIS IS PAGE 01. LINE 05.</li>
<li>THIS IS PAGE 01. LINE 06.</li>
<li>THIS IS PAGE 01. LINE 07.</li>
<li>THIS IS PAGE 01. LINE 08.</li>
<li>THIS IS PAGE 01. LINE 09.</li>
<li>THIS IS PAGE 01. LINE 10.</li>
<li>THIS IS PAGE 01. LINE 11.</li>
<li>THIS IS PAGE 01. LINE 12.</li>
<li>THIS IS PAGE 01. LINE 13.</li>
<li>THIS IS PAGE 01. LINE 14.</li>
<li>THIS IS PAGE 01. LINE 15.</li>
<li>THIS IS PAGE 01. LINE 16.</li>
<li>THIS IS PAGE 01. LINE 17.</li>
<li>THIS IS PAGE 01. LINE 18.</li>
<li>THIS IS PAGE 01. LINE 19.</li>
<li>THIS IS PAGE 01. LINE 20.</li>
<li>THIS IS PAGE 01. LINE 21.</li>
<li>THIS IS PAGE 01. LINE 22.</li>
</ul>

CSS: 

ul.code {
    border: solid red 1px;
    padding: 0px;
    margin: 0px;
}
.code li {
    font-size: 8pt;
    font-family: "courier";
    padding-left: 1px;
}
.code li:hover {
    background-color: #F7FA81;
}
0 голосов
/ 17 декабря 2010

Сделайте положение подсветки div абсолютным, а затем посмотрите на следующее решение.

Как исправить абсолютное позиционирование в FF?

0 голосов
/ 11 декабря 2010

Я удалил и заменил ваш тип документа тем же самым и перешел от 1 ошибки проверки к 50. Большинство из них - «альтернативные» ошибки и тому подобное, но там что-то произошло глупо.

РЕДАКТИРОВАТЬ: Возможно, возникла проблема с типом документа при копировании / вставке, но я по-прежнему показываю 56 ошибок.Одним из них является ваша попытка стилизовать тег PRE, который недопустим.

0 голосов
/ 11 декабря 2010

Вы должны заставить это работать в IE6? Потому что, если нет, вы можете просто использовать псевдокласс :hover и избавиться от всего скрипта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...