Visual Studio (2012 и ниже) удаляет свойства CSS

Ответ 1

Хорошо, я нашел временное решение для этого:

Существование стиля "filter:" - это то, что приводит к исчезновению всех стилей "background-image:", кроме последнего. Это не то, что он удаляет то, что он не делает знаете, он просто удаляет все, кроме последнего стиля "фонового изображения". Должен быть Microsoft (предполагаемый) способ сделать фильтр, а стиль специфического фонового изображения MS хорошо сочетается вместе, однако они не очень хорошо его кодировали. Определенно дефект MS VS. Для воспроизведения просто щелкните правой кнопкой мыши в классе CSS, у которого есть код, похожий на этот:

background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */

а затем выберите "Стиль сборки...". Затем нажмите "ОК", не меняя ничего и наблюдая, как он удаляет все, кроме последнего фонового изображения. Попробуйте изменить порядок "стилей фонового изображения" и оставить webkit последним, а затем просмотреть сами.

Вы заметите, что если вы удалите стиль "filter:" , проблема исчезнет, ​​однако нам нужно это (для этого примера), поэтому решение, похоже, перемещает стиль "filter:" , прежде всего Строки "background-image:". Как только вы это сделаете, он оставит их в покое, и проблема исчезнет.

Изменение вышеуказанного CSS для этого, похоже, облегчает проблему:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  

UPDATE: Обходной путь выше работает только тогда, когда VS применяет форматирование, когда вы используете диалог "Стиль сборки..." → "Изменить стиль", потому что я просто видел его снова с исправлением выше на месте, так что это должно быть от чего-то еще.

Ответ 2

Градиенты - это свойства CSS3.

Visual Studio не поддерживает CSS3 и HTML5, и это может быть проблемой здесь. Но есть поддержка HTML5 и CSS3 в Visual Studio 2010 SP1
Итак, почему бы вам не загрузить Visual Studio 2010 SP1 и попробовать?

Ответ 3

В Visual Studio попробуйте: Инструменты > Параметры > Текстовый редактоp > CSS > Разное отключить Обнаружение ошибок. Я сделал это и, используя файл с вашим примером выше, запустил решение, закрыл файл, закрыл решение, и мой код все еще там: -)

Ответ 4

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

/* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef');

Ответ 5

У меня нет Visual Studio для проверки этого, но, читая информацию из других комментариев и ответов, кажется, что вы можете полностью отделить filter от повторного выбора селектора. Например:

.someClass {
  background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
  background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
  background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
  background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
  background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
  background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
  background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  
}

.someClass { /* repeated to isolate filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
}

Это настоящая боль, но если она решает вашу проблему, пока MS не выработает ошибку...

Ответ 6

У меня была точно такая же проблема!

У меня были установленные инструменты IDE DevX, и удаление, похоже, решило проблему для меня. Я сделал это несколько дней назад, и проблема не возникла.

Ответ 7

Я понимаю, что это более старый поток, но у меня все еще есть одна и та же проблема.

Я еще не нашел, как предотвратить это, но есть намного более простой способ исправить CSS-обход:

Как только вы заметите, что VS2010 испортил код CSS, остановите отладку, перейдите на вкладку "Файл CSS" и нажмите кнопку отмены. Ваш код Css возвращается до того, как VS2010 испортил его. Скомпилируйте и он работает.

Я собираюсь попробовать VS2012 в ближайшее время, кто-нибудь знает, если он был там решен?