Необъяснимая проблема представления пользовательского интерфейса - PullRequest
Новая
       2

Необъяснимая проблема представления пользовательского интерфейса

2 голосов
/ 11 июня 2011

enter image description here

Может кто-нибудь объяснить странное поведение презентации на скриншоте интерфейса выше?Как видите, нежелательное разделение между типом страховки и вершиной строки.При просмотре кода через Firebug в коде есть явный разрыв.Вы можете увидеть эту странность на скриншоте кода ниже.

enter image description here

У родительского контейнера типа div.insurance нет стилей CSS.Другими словами, для свойства вертикального выравнивания, свойства margin-top, свойства padding-top и свойства float заданы значения по умолчанию, и они не наследуют значение, которое может вызвать эту презентацию.У дочерних элементов есть этот стиль: 

div#worklist table tr td.col-InsuranceType div.insurance-type div {
    display: block;
    margin-bottom: 2px;
    margin-left: 25px;
}

Компания span.insurance имеет следующий стиль: 

div#worklist table tr td.col-InsuranceType div.insurance-type span.insurance-company {
    font-weight: bold;
}

Компоненты этого веб-приложения:

  • ASP.NET MVC 3
  • Razor View Engine
  • jQuery 1.5.1
  • SQL Server 2008
  • IIS 7.5

Эта проблема возникает в FF4, IE8 и IE7.Пожалуйста, дайте мне знать, если вы знаете причину этого необъяснимого поведения презентации.

Спасибо.

Ответы [ 3 ]

0 голосов
/ 11 июня 2011

Вместо 

<div class="insurance-type">
   <div class="bold">
    <span class="insurance-company"

вы пробовали: 

<div class="insurance-type"><div 
  class="bold"><span 
    class="insurance-company">
0 голосов
/ 11 июня 2011

Это всего лишь предположение, так как я не могу увидеть реальную страницу, может ли быть какой-нибудь символ мусора между td и div, который даже у firebug есть проблемы с отображением? Если контент не генерируется на стороне клиента (например, через Ajax), попробуйте просмотреть исходный код в Firefox (Ctrl-U или Cmd-U) и посмотреть, есть ли там какой-нибудь странный символ. Я бы даже зашел так далеко, что посмотрел на необработанные данные в Fiddler.

На другой ноте <div class="bold"> - это плохая практика (не семантическая), используйте вместо нее <strong>. :)

0 голосов
/ 11 июня 2011
...