Таинственное вертикальное пространство CSS

От этого простого HTML.






  
  Hello
  





MyObject o = www.mycompany.project.ObjectFactory.
MyObject o = www.mycompany.project.ObjectFactory.

Вот результат:

сопроводительный текст http://img23.imageshack.us/img23/6224/resultrendering.png

Результат подобен через браузер. Таким образом, я полагаю, что это не ошибка браузера.

Где делает вертикальное пространство между текстовой строкой, и раскрывающаяся подсказка во втором рендеринге прибывают из? И как может <отделение>   решают эту проблему?

ОБНОВЛЕННЫЙ:

Завершите от Richard M ответ. Поле без содержания не имеет никакого размера (за исключением Встроенных). <Отделение>   делают "раскрывающийся" размер, существует.

Лучшее решение, по словам Richard, состоит в том, чтобы использовать встроенный вместо встроенного блока. Так как измерение по вертикали встроенных является тем же независимо от своего существования содержания

По некоторым причинам я еще не знаю, граничная вершина: 1em больше не необходимо когда переключатель для "встраивания"

ОБНОВЛЕННЫЙ 2:

О НЕТ.. Эта проблема еще не может быть завершена. Изменение, которое предлагает Richard M (использование inline и удалите margin-top) работал бы только с Браузером WebKit (Chrome, Safari) На IE и Firefox, popup поле выравнивается налево, а не к текстовой строке.

Первый образец в вопросе (встроенный блок и непустое содержание) является, вероятно, самой надежной опцией на данный момент.

ОБНОВЛЕННЫЙ 3:

Заключение! Истинная причина этой проблемы порождает из факта это non-inline блок без содержания не имеет никакого размера. Richard M предлагает использовать inline избегать этой проблемы. К сожалению, я нашел эту несовместимость решения через браузеры. Я придумал другую опцию в противоположном направлении, с помощью inline-block с принудительным размером через height: 1px; Эта работа правильно в любом браузере.






  
  Hello
  




  
  
MyObject o = www.mycompany.project.ObjectFactory.(1, 2, ...

12
задан Sake 11 March 2010 в 01:34
поделиться

5 ответов

Ваш .hint div имеет верхнее поле 1em, чтобы "протолкнуть" его ниже строки текста, однако во втором случае ваш .popup div ничего не содержит (поскольку абсолютно позиционированные элементы не занимают места). Встроенный блок div без содержимого не имеет ни высоты, ни ширины и располагается на базовой линии строки текста. Таким образом, вы «отталкиваетесь» от низа, а не от верха линии, и, следовательно, от дополнительного вертикального пространства 1em. Я действительно не понимаю, почему вы используете встроенный блок, встроенный будет работать так же хорошо, учитывая, что содержимое div абсолютно позиционировано.


В ответ на ваш вопрос правки: Использование встроенного дисплея, как я предлагал, должно работать, но вам нужно установить левое и верхнее значения вашего абсолютного позиционирования .подсказка div в ноль. Кроме того, вам необходимо удалить элемент

, иначе вы получите разрыв строки там, где он встречается (потому что он не является встроенным).

3
ответ дан 2 December 2019 в 22:22
поделиться

Если требуется быстрое/простое/грязное решение, извлеките службу ASMX из маршрутизации MVC каким-либо образом.

Если вы хотите сделать все лучше, извлеките логику из службы ASMX и создайте для нее новую страницу в приложении MVC. Затем можно реализовать логику в контроллере и разрешить приложению View обрабатывать возврат сообщения SOAP (или перейти с JSON в зависимости от того, кто потребляет услугу).

-121--4434964-

Если удалить margin-top: 1em; будет работать второй макет.

EDIT: замените margin-top: 1em; на overflow: auto; и вам больше не нужен div.

-121--2853362-

Это связано с тем, что div с всплывающим окном класса не с положением : абсолютное , а с его дочерним, подсказкой .

С точки зрения браузера, всплывающее окно div, содержащее только подсказку , не содержит содержимого и, следовательно, не имеет измерений. < div > & nbsp;

дает ему содержимое и заставляет всплывающее окно подсказки правильно начинаться на верхнем краю div - но почему это все равно ускользает от меня, хотя я уверен, что есть вполне логичное объяснение этому:)

4
ответ дан 2 December 2019 в 22:22
поделиться

Может ли быть настоящее намерение:

<div style="clear:both;"></div>

вместо просто:

<div>&nbsp;</div>
3
ответ дан 2 December 2019 в 22:22
поделиться

Если вы удалите margin-top: 1em;, второй макет будет работать.

EDIT: замените margin-top: 1em; на overflow: auto; и вам больше не понадобится div.

0
ответ дан 2 December 2019 в 22:22
поделиться

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

0
ответ дан 2 December 2019 в 22:22
поделиться