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

问题描述

我在使用 Visual Studio 2010 时遇到了一个非常奇怪的问题.当我将渐变的 CSS 属性添加到我的样式表时，Visual Studio 将在调试一段时间后将其删除.

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'); 
}

有时当我开始调试时，Visual Studio 会编辑 CSS:

Sometimes when I start debug, Visual Studio edits the CSS:

.button
{
    /* Firefox */
    background-image: linear-gradient(top, #fff, #efefef);
    /* Chrome, Safari */
    /* Modern Browsers*/
    }

所以Visual Studio 似乎删除了一些它不知道的属性.这真的很烦人.知道如何阻止吗?

So Visual Studio seems to delete some attributes it doesn't know. That's really annoying. Any idea how I could stop that?

这不是 CSS 注释的问题.它也发生在没有评论的情况下.

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

更新

似乎是通过保存包含 css 文件的文件来实现的.当我编辑我的主布局并保存它时，Visual Studio 将删除我上面在链接的 css 文件中提到的这些属性.

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.

而且它不是一个 CSS3 问题，因为它没有触及我的边界半径类和 ID.所以也许这是过滤器属性.但是，我想停止 Visual Studio 在没有权限的情况下更改 css 文件中的内容.

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.

2014 年 6 月 27 日更新

在 Visual Studio 2013 中解决的问题https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css

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:

filter:"样式的存在是导致所有background-image:"样式消失的原因，除了最后一个列出的样式.这并不是说它删除了它没有删除的东西知道，它只是删除了除列出的最后一个背景图像"样式之外的所有样式.必须是微软(预期)使过滤器和特定于 MS 的背景图像风格很好地结合在一起的方式，但是他们没有很好地编码.绝对是 MS VS 缺陷.要重现，只需右键单击具有类似代码的 CSS 类:

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 */

然后选择构建样式...".然后单击确定"而不更改任何内容并观察它删除除最后一个背景图像之外的所有内容.尝试更改背景图像样式"的顺序并将 webkit 放在最后，然后自己查看.

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.

您会注意到，如果您删除过滤器:"样式，问题就会消失，但是我们需要(对于此示例)，因此解决方案似乎将过滤器:"样式移到了所有背景图像:"行.一旦你这样做了，它就会让他们独自一人，问题就消失了.

将上面的 CSS 更改为此似乎可以缓解问题:

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);  

<小时>

更新:上面的解决方法仅适用于当您使用构建样式..."->修改样式"对话框时 VS 应用格式时，因为我刚刚再次看到它并修复了上面的内容，所以它必须来自其他东西.

---

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屋！