Visual Studio（2012 及更低版本）删除 CSS 属性答案

【问题标题】：Visual Studio (2012 and lower) deletes CSS propertiesVisual Studio（2012 及更低版本）删除 CSS 属性
【发布时间】：2014-06-27 07:06:20
【问题描述】：

我在使用 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));
    /* Modern Browsers*/
    background-image: linear-gradient(top, #fff, #efefef);
    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); 
}

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

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

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

这不是 CSS cmets 的问题。没有 cmets 也会发生这种情况。

更新

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

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

2014 年 6 月 27 日更新

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

【问题讨论】：

嗨 René，有什么更新吗？这真的把我逼疯了……？
我有same problem。尝试复制后，我知道很多：1）它发生在我编辑css文件并保存时。 2）它与输入的任何特定文本无关，因为我能够用我复制的一些文本对其进行复制，然后恢复，将其粘贴回去，并且不再发生。
也只能在背景图像样式和过滤器样式上看到它，而不是在背景或背景颜色上。我现在可以通过右键单击 css 类，选择“构建样式...”并单击“确定”而不进行任何编辑来一致地重现这一点。它要么是周期性地触发（不希望的）格式化，要么是在处理 CSS 时来自一组用户操作。
我在 Visual Studio 2012 中遇到了同样的问题，尚未找到任何解决方案。
这已被报告，据说在 VS2013 中已修复：connect.microsoft.com/VisualStudio/feedback/details/782677/…

标签： html css visual-studio visual-studio-2010 debugging

【解决方案1】：

好的，我找到了一个临时解决方法：

“filter:”样式的存在导致所有“background-image:”样式都消失了，除了最后一个列出的样式。并不是说它正在删除它没有删除的东西知道，它只是删除了列出的最后一个“背景图像”样式之外的所有样式。必须是微软（有意）制作过滤器的方式和特定于 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 放在最后，然后自己查看。

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

将上面的 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);

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

【讨论】：

@naveen - 是的。只需ankSVN。想知道其他人是否都在使用该插件。?.?
把我当作学生吧。最近我遇到了同样的问题。 stackoverflow.com/q/13255807/17447我很好奇这是否解决了错误
@naveen - 很抱歉从您的 SO 帖子中阅读了问题/解决方案并考虑到这一点评估了我的代码，但它没有帮助。
我将其标记为正确答案，因为它描述了确切的问题和可能的解决方案。正如其他 cmets 所述，这些问题在 VS2013 中得到了解决。 connect.microsoft.com/VisualStudio/feedback/details/782677/…

【解决方案2】：

渐变是 CSS3 属性。

Visual Studio 不支持 CSS3 和 HTML5，这可能是问题所在。
但是支持HTML5 & CSS3 in Visual Studio 2010 SP1
那么，何不下载Visual Studio 2010 SP1试试看呢？

【讨论】：

只有一行CSS3。另一个是浏览器特定的属性。当然，Visual Studio 不一定要支持它们，但它们被删除是不可接受的。感谢您的回答。我会尝试 SP1。
对不起，但这似乎不是我的问题的解决方案。
我安装了 SP1 我也有这个问题。很奇怪。
也许是时候在 Microsoft Connect 上发布此内容并将其报告为错误了。在没有任何警告的情况下丢失 css 文件中的文本信息真的很烦人。
这不是问题。我已经安装了 Visual Studio 2010 SP1，但仍然有这个问题。（“Microsoft Visual Studio 2010 版本 10.0.40219.1 SP1Rel”）。

【解决方案3】：

在 Visual Studio 中尝试：工具 > 选项 > 文本编辑器 > CSS > 杂项关闭检测错误。我这样做了，并在上面的示例中使用了一个文件，运行了解决方案，关闭了文件，关闭了解决方案，我的代码仍然存在 :-)

【讨论】：

我已经在不久前设置了它。但这并没有解决问题。我是如何提到的：这“有时”会发生。当我调试时，也许有 20 次。但它会删除我的解决方案的所有 CSS 文件中显示的属性。

【解决方案4】：

我在 VS2010 中也遇到过同样的问题，可以确认该问题不会影响 CSS3 样式。我可以建议的唯一解决方法是将消失的行的副本放在其自身上方的注释中，这样至少很容易再次复制回来。

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

【讨论】：

出于兴趣，您使用的是什么类型的源存储库？我目前正在使用 VSS(!!) 进行项目。我还在 VS2010 中打开了几天的 CSS 文件，然后用 VS2010 再次导航到它，当它显示页面时，它在经过长时间的思考后删除了它。不确定这是否与您的经历有关？

【解决方案5】：

我没有 Visual Studio 来对此进行测试，但是从其他 cmets 和答案中读取信息，您似乎可以尝试将 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】：

我也遇到了同样的问题！

我安装了 DevX IDE 工具，卸载它似乎已经解决了我的问题。几天前我就这样做了，问题没有再次出现。

【讨论】：

我没有安装它们，它也发生在不同的计算机和开发环境中。

【解决方案7】：

我意识到这是一个较旧的线程，但我仍然有同样的问题

我还没有找到如何防止它，但有一个更简单的方法来纠正 CSS 混乱：

一旦您发现 VS2010 弄乱了 CSS 代码，请停止调试，转到 CSS 文件选项卡并按下撤消按钮。您的 Css 代码又回到了 VS2010 搞砸之前。编译就可以了。

我马上要试试VS2012，有没有人知道那里解决了？

【讨论】：

在过去的几年里我没有注意到这个错误。在 6 个月的时间里，我非常频繁地使用 VS2012，但这并没有发生在我身上。但是有人绝对应该用我在最初问题中提交的代码尝试一下，因为多年来我从未使用过纯 CSS（总是有一个带有 VS 插件的 SCSS 编译器）。