•  21-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь выравнивать таблицу с входом, чтобы таблица создала раскрывающуюся спину, похожий на Google. Я использую jQuery, чтобы получить позицию и размеры входного элемента, а затем CSS для размещения таблицы. Вещи работают довольно гладко, когда я не использую Doctype.

Теперь, когда ЛЮБЫЕ Doctype включен на страницу, все идет не так (странно не в т.е.). Таблица внезапно на 1PX шире и движется вверх и остается на 1PX.

Пожалуйста, помогите! Возможно, у некоторых из вас есть кусок кода, который делает правильное выравнивание.

<!--<!DOCTYPE html>-->
<html>

    <script src="js/jquery/jquery.js"></script>

    <body>

        <input type="text" id="input" />        
        <table id="dropdown" style="border: solid 1px black; border-collapse: collapse; position: absolute;">
            <tr>
                <td>Text</td>
            </tr>
        </table>

        <script>

        var input = $("#input");
        var dropdown = $("#dropdown");

        dropdown.css("top", input.position().top + input.outerHeight() - 1);
        dropdown.css("left", input.position());
        dropdown.css("width", input.outerWidth());

        </script>

    </body>

</html>
Это было полезно?

Решение 3

Спасибо за ваши ответы.

Я действительно узнал, что главная проблема была border-collapse: collapse имущество. Когда установлено collapse с <!DOCTYPE...> Тэг включен, тогда абсолютное позиционирование таблицы и настройка ширины дало результаты, которые я не ожидал (но на самом деле желаемое поведение в соответствии с стандартом W3C). Для целей точного выравнивания это лучше установить border-collapse: separate.

Другие советы

Вероятно, это из -за абсолютного позиционирования: 

position: absolute;

Попробуйте удалить это или изменить его на относительный и установить маржу.

Абсолютное позиционирование - это сложно, и часто оно должно быть изменено для IE против других браузеров.

Используя следующие HTML и jQuery, я смог сделать таблицу и позиционировать одинаковую как в IE8, так и в Chrome 2.

<!DOCTYPE html>
<html>
 <head>
     <title>Test Page</title>
  </head>
<body>
     <input type="text" id="input" />
     <table id="dropdown" style="border: solid 1px black; 
           border-collapse: collapse; position: absolute;">
        <tr>
           <td>
              Text
            </td>
         </tr>
      </table>

    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
     </script>

     <script type="text/javascript">
        $(document).ready(function({
            var input = $("#input");
            var dropdown = $("#dropdown");
            dropdown.css("top", input.position().top + input.outerHeight() - 1);
            dropdown.css("left", input.position());
            dropdown.css("width", input.outerWidth());   
         });
      </script>

 </body>
</html>

Я заметил, что вам не хватало участка HTML, типа языка тегов сценария и что в вашем JavaScript не было разделения Document.Read.

Надеюсь, это поможет некоторым.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top