#html #css #asp.net-mvc #user-interface #firebug
#HTML #css #asp.net-mvc #пользовательский интерфейс #firebug
Вопрос:
Кто-нибудь может объяснить странное поведение презентации на скриншоте пользовательского интерфейса выше? Как вы можете видеть, существует нежелательное разделение между типом страховки и верхней частью строки. При просмотре кода через Firebug в коде обнаруживается явный разрыв. Вы можете просмотреть эту странность на скриншоте кода ниже.
Родительский контейнер типа div.insurance не имеет стилей CSS. Другими словами, свойство vertical-align, свойство 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-company такой стиль:
div#worklist table tr td.col-InsuranceType div.insurance-type span.insurance-company {
font-weight: bold;
}
Компоненты этого веб-приложения являются:
- ASP.NET MVC 3
- Движок просмотра Razor
- jQuery 1.5.1
- SQL Server 2008
- IIS 7.5
Эта проблема возникает в FF4, IE8 и IE7. Пожалуйста, дайте мне знать, если вам известна первопричина такого необъяснимого поведения презентации.
Спасибо.
Комментарии:
1. как насчет div.bold и span.insurance-company? Есть ли у них прикрепленные стили?
2. Я предполагаю ^ что это все. Если нет, дайте нам ссылку, чтобы мы могли посмотреть.
3. Если вы не можете предоставить прямую ссылку, вам нужно создать тестовый пример, который мы можем просмотреть. Шаги для этого: откройте страницу в Firefox. Просмотрите исходный код, скопируйте все это. Вставьте в JS Bin . Отредактируйте любую конфиденциальную информацию. Добавьте свой CSS внутрь
<style></style>. Удалите все, что возможно, не относящееся к делу, просто убедитесь, что в тестовом примере та же проблема.4. @DA и @Frits van Campen, я только что добавил стили, о которых идет речь. @thirtydot, я могу создать тест, но у меня будет время сделать это.
5. когда у вас есть такой селектор:
div#worklist table tr td.col-InsuranceType div.insurance-type divв этом CSS, вероятно, МНОГОЕ происходит. Это довольно грязно. Откройте свою страницу с помощью FireBug и начните удалять классы в HTML, пока не найдете те, которые вызывают проблему.
Ответ №1:
Это всего лишь предположение, поскольку я не вижу фактической страницы, может быть, между td и div есть какой-то символ мусора, который даже у firebug возникают проблемы с отображением? Если содержимое сгенерировано не на стороне клиента (т. Е. через Ajax), попробуйте просмотреть исходный код в Firefox (Ctrl-U или Cmd-U) и посмотреть, нет ли там каких-либо странных символов. Я бы даже зашел так далеко, что посмотрел необработанные данные в Fiddler.
С другой стороны, <div class="bold"> это плохая практика (не семантическая), используйте <strong> вместо этого. 🙂
Комментарии:
1. хотя
<div class="bold">это может быть плохой практикой, это так, потому что не удается отделить презентацию от содержимого.<strong>указывает семантику, которая может подходить или не подходить для выделяемого содержимого и не должна использоваться слепо в качестве замены выделения жирным шрифтом.
Ответ №2:
Это может помочь: Понимание выравнивания по вертикали или «Как (не) центрировать содержимое по вертикали»
Комментарии:
1. Нет кубиков. К родительскому контейнеру не применены стили, включая vertical-align:middle, включая vertical-align:middle.
Ответ №3:
Вместо
<div class="insurance-type">
<div class="bold">
<span class="insurance-company"
вы пробовали:
<div class="insurance-type"><div
class="bold"><span
class="insurance-company">
Комментарии:
1. Безуспешно пытался удалить все ненужные пробелы.