Visual Studio（2012和更低版本）删除CSS属性 [英] Visual Studio (2012 and lower) deletes CSS properties

问题描述

我有一个非常奇怪的问题与Visual Studio 2010.当我添加CSS属性的渐变到我的样式表，Visual Studio将要删除它经过一段时间的调试。

我添加到样式表的代码示例：

  .button 
 {
 / * Firefox * / 
 background-image：-moz-linear-gradient（top，#fff，#efefef）; 
 / * Chrome，Safari * / 
 background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，#fff），color-stop（1，#efefef ））; 
 / *现代浏览器* / 
 background-image：linear-gradient（top，#fff，#efefef）; 
 / * IE * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorStr ='＃ffffff'，EndColorStr ='＃efefef'）;有时当我开始调试时，Visual Studio编辑CSS：
  .button 
 {
 / * Firefox * / 
 background-image： #fff，#efefef）; 
 / * Chrome，Safari * / 
 / *现代浏览器* / 
} 
  
所以Visual Studio似乎删除了一些不知道的属性。这真的很烦人。 任何想法如何阻止？ 
 
 
 
这不是CSS评论的问题。 
 
 $ b 
 更新 
 
 
 
通过保存包括css文件的文件。当我编辑我的主布局并保存，Visual Studio将删除我上面提到的链接css文件中的属性。
 
 
 
和它的不 CSS3问题，因为它不接触我的border-radius类和ids。所以也许它的过滤器属性。但是我想停止Visual Studio在没有权限的情况下更改css文件中的内容。
 
 
 
 更新27. 2014年6月 b 
 
 Visual Studio 2013中解决的问题
  https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css  
解决方案
好，我发现了一个暂时的解决方法：
 
 
 
 filter：除了最后一个列出的以外，所有的background-image：样式都会消失。这不是删除它不知道的，它只是删除除了最后一个background-image样式。必须是Microsoft（预期）的方式使过滤器和MS特定的背景图像风格在一起很好地玩，但他们没有编码很好。绝对是MS VS缺陷。要重现，只需右键单击具有类似这样代码的CSS类：
  background-color：#EBEBEB; / *不支持的浏览器的后台背景颜色* / 
 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 * / 
  
，然后选择Build Style ...。然后单击确定，不更改任何内容，并观察它删除所有，但最后一个背景图像左。尝试改变background-image样式的顺序，最后离开webkit然后自己看看。
 
 
 
 你会注意到，如果你删除过滤器：style的问题消失了，但是我们需要这样（对于这个例子），所以解决方案似乎是在所有的background-image：行之上移动filter：样式，一旦你这样做，  
 
 
 
将上述CSS更改为这似乎可以解决问题：
  filter：progid：DXImageTransform.Microsoft.gradient（startColorStr ='＃FFFFFF'，EndColorStr ='＃DAD6E7'，gradientType ='1'）; / * IE6  -  IE9 * / 
 background-color：#EBEBEB; / *不支持的浏览器的后台背景颜色* / 
 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： em>  
上面的解决方法仅适用于当您使用构建样式... - >修改样式对话框时，VS应用格式化，因为我刚刚看到了修复以上的地方，所以它必须从一些其他。
 
I have a really strange problem with Visual Studio 2010. When I add CSS properties for a gradient to my stylesheet, Visual Studio is going to delete it after some times of debugging.

Example of the code I add to my stylesheet:
.button
{
    /* Firefox */
    background-image: -moz-linear-gradient(top, #fff, #efefef);
    /* Chrome, Safari */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #efefef));
    /* Modern Browsers*/
    background-image: linear-gradient(top, #fff, #efefef);
    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); 
}
Sometimes when I start debug, Visual Studio edits the CSS:
.button
{
    /* Firefox */
    background-image: linear-gradient(top, #fff, #efefef);
    /* Chrome, Safari */
    /* Modern Browsers*/
    }
So Visual Studio seems to delete some attributes it doesn't know. That's really annoying. Any idea how I could stop that?

It's not a problem of CSS comments. It also happen without the comments.

Update

It seems that it happens by saving of files that included the css file. When I edit my Master Layout and save it, Visual Studio is gonna delete this properties I mentioned above in the linked css file.

And its NOT a CSS3 problem because it doesn't touch my border-radius classes and ids. So maybe it's the filter property. However I want stop Visual Studio changing my things in the css file without permissions.

Update 27. June 2014

Problem solved in Visual Studio 2013
https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css
解决方案
Okay I found a temporary workaround for this:

The existence of the "filter:" style is what's causing all of the "background-image:" styles to disappear except the last one listed. It's not that it's removing what it doesn't know, it's just removing all but the last "background-image" style listed. Must be Microsoft (intended) way of making filter and an MS specific background-image style play nicely together, however they didn't code it up very well. Definitely a MS VS defect. To repro, just right click in the CSS class that has code similar to this:
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 */
and then select "Build Style...". Then click "OK" without changing anything and watch it remove all but the last background-image left. Try changing the order of the "background-image styles and leave webkit last and then see for yourself.

You'll notice that if you remove the "filter:" style the problem goes away, however we need that (for this example) so the solution seems to be moving the "filter:" style above all the "background-image:" lines. Once you do that, it leaves them alone and the problem goes away. 

Changing the above CSS to this seems to aleviate the problem:
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:
The workaround above only works for when VS applies formatting when you're using the "Build Style..." --> "Modify Style" dialog because I just saw it again with the fix above in place so it must be from somthing else.

                        
这篇关于Visual Studio（2012和更低版本）删除CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！