Visual Studio 2013 CSS-стили в разработке

Question

Есть ли у кого-нибудь еще проблема, когда стиль выглядит в режиме разработки в разных браузерах (IE, Chrome & Firefox), а затем при развертывании сайта стиль немного не работает ?

Я знаю, что CSS одинаково между моим ящиком и общим сервером. Поэтому я не уверен, что это может быть! Есть ли какой-нибудь инструмент CSS, который мог бы помочь мне отладить это?

Эти изображения из Google Chrome. Я также хочу отметить, что я использую файл bootstrap.css по умолчанию из шаблона MVC, который использует Visual Studio 2013.

HTML:

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <a href="../Home/" class="navbar-brand"> 
     <img src="~/Images/jaggedarraysLogoSmall.png" /></a> 
</div> 

CSS:

.navbar-brand,.navbar-nav > li > a { 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); 
} 
.navbar-brand { 
    float: left; 
    padding: 10px; 
    text-indent: -9999px; /* hides the link text */ 
    line-height: 20px; 
    margin-top: 10px; 
    width: 185px; 
    background: url(../Images/jaggedarraysLogoSmall.png) no-repeat; 
    height: 35px; 
} 

Answer 1

Вы должны использовать инструменты браузера в IE10/11 или эквивалентные инструменты в других браузерах и на конкретных областях не отображаются правильно. Хорошие инструменты разработчика покажут вам иерархию стилей и конкретные значения, которые применяются, чтобы вы могли видеть, что-то отличается. Если значения различны, источник может указать вам в правильном направлении.

Вы также должны убедиться, что вы очистили кеш браузера и что хостинг-провайдер не добавляет какой-либо код на вашу страницу (некоторые бесплатные хостинги, например, рекламные объявления или аналогичные).

Еще одна возможность - поскольку сборка ASP.NET выполняет автоматическую мини-фильтрацию и переформатирование кода CSS для кода выпуска, источником ваших проблем может быть некоторая ошибка в синтаксисе CSS, который браузер понимает, но механизм связывания ASP.NET неправильно читает и вызывает неправильный вывод для выпуска. Используйте W3C CSS Validator - http://validator.w3.org/ - и исправить любые ошибки.

Чтобы быть уверенным, что минификация является причиной, попробуйте временно отключить для производства, чтобы увидеть, если это помогает - увидеть последний пост здесь простой способ ahieve что - ASP.NET Bundles how to disable minification

Answer 2

Я использую поджигатель (http://getfirebug.com/) в Chrome и FF, а затем в IE IE-инструмент [F12]. К сожалению, инструмент dev в IE довольно паршивый, но он позволяет по крайней мере настраивать позиционирование по мере необходимости.

Неужели вы создали файл сброса CSS, чтобы помочь «нуля»?

Проверьте эти страницы, если вы не знаете о сбросе CSS:

http://www.cssreset.com/

http://www.css-reset.com/

Я обычно использую Эрик Мейер, хотя он иногда чувствует себя излишним. В крайнем случае я использую универсальный сброс, но это тоже может быть проблематичным. Прочитайте сайт, чтобы сообщить о себе и принять собственное решение, основанное на ваших потребностях.