logo标签列表

Visual Studio（2012及以下版本）删除CSS属性

htmlcssvisual-studiovisual-studio-2010debugging
26

我在使用 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 注释的问题。即使没有注释也会发生。

更新

似乎是在保存包括 CSS 文件的文件时发生了这种情况。当我编辑我的主布局并保存它时，Visual Studio 就会删除链接的 CSS 文件中提到的这些属性。

而且这不是 CSS3 的问题，因为它不会影响我的 border-radius 类和 ID。所以也许是 filter 属性造成的。但是我希望阻止 Visual Studio 未经许可更改 CSS 文件中的内容。

2014 年 6 月 27 日更新

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

2
嗨，René，这个有更新了吗？这真的让我抓狂了...？ - Amila
我有同样的问题。 经过尝试，我知道这些：1）当我编辑CSS文件并保存时会发生。2）它与输入的任何特定文本无关，因为我能够使用一些复制的文本进行重现，然后还原，再粘贴回去，它就不会再次发生。 - johntrepreneur
同时，我只在background-image样式和filter样式上看到了这个问题，而在background或background-color上没有看到。现在我能够稳定地重现这个问题，方法是右键单击CSS类，选择“Build Style...”，然后点击“OK”而不进行任何编辑。这可能会周期性地触发（不希望的）格式化，或者在处理CSS时从一组用户操作中触发。 - johntrepreneur
我在Visual Studio 2012中遇到了同样的问题，还没有找到任何解决方案。 - Henrik Janbell
这个问题已经被报告过了，据说在VS2013中已经修复： https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css - Darren Griffith
@D-Money 谢谢你添加这个。 - René Stalder
7个回答
5

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

"filter:"样式的存在导致除最后一个列出的"background-image:"样式之外的所有样式都消失了。它并不是在删除它不知道的内容，而是仅保留最后一个“background-image”样式。这可能是微软让过滤器和MS特定的background-image样式共同使用的（有意）方式，但他们编码得不太好。这绝对是一个微软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 */

然后选择“构建样式...”。然后单击“确定”而不更改任何内容，观察它删除所有但最后一个背景图像。尝试更改“background-image”样式的顺序，并将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);

更新： 上述解决方法仅适用于当您使用“构建样式…”-->“修改样式”对话框时，VS应用格式设置时。因为我刚刚在运用该修复方法时注意到了这个问题，所以它肯定是由其他原因引起的。

@naveen - 是的。只是用ankSVN插件。不知道其他人是否都在使用这个插件。?.? - johntrepreneur
请把我当作一个学生。最近我遇到了类似的问题。http://stackoverflow.com/q/13255807/17447 我很好奇这是否能解决错误。 - naveen
@naveen - 抱歉，我阅读了您在SO帖子中的问题/解决方案，并以此为依据评估了我的代码，但并没有帮助到我。 - johntrepreneur
我将其标记为正确答案，因为它描述了确切的问题和可能的解决方案。正如其他评论所述，该问题已在VS2013中得到解决。 https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css - René Stalder
3
3
只有一行CSS3代码，其他都是特定于浏览器的属性。当然，Visual Studio不必支持它们，但删除它们是不可接受的。感谢您的回答。我会尝试SP1版本。 - René Stalder
1
抱歉，但这似乎不是我的问题的解决方案。 - René Stalder
1
我已经安装了SP1，但我也遇到了这个问题。很奇怪。 - Steven Striga
也许现在是时候将此问题发布到Microsoft Connect并报告为错误了。在没有任何警告的情况下丢失我们在CSS文件中的文本信息真的很烦人。 - Junior Mayhé
这不是问题。我已经安装了Visual Studio 2010 SP1，但仍然存在这个问题。（“Microsoft Visual Studio 2010 Version 10.0.40219.1 SP1Rel”）。 - johntrepreneur
@JuniorMayhé - 这个问题已经被报告过了，而且据说在VS2013中已经修复了： https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css - Darren Griffith
2

我也在VS2010中遇到了这个问题，可以确认该问题不会影响CSS3样式。唯一的解决方法是在消失的行上方添加一个注释，并将其复制一份，以便于再次复制。

/* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef');
你使用的是哪种源代码库呢？我目前正在使用VSS(!!)。在VS2010中，我也打开了CSS文件几天，然后再次使用VS2010导航到它时，当它显示页面时，它进行了长时间的思考后才进行了删除。不确定这是否与您的经验有关？ - Scotty.NET
2
在 Visual Studio 中，尝试：工具 > 选项 > 文本编辑器 > CSS > 其他，关闭“检测错误”功能。我已经这样做了，并使用了包含您上方示例的文件，运行了解决方案，关闭了该文件、关闭了解决方案，我的代码仍然存在 :-)
我早就关闭了它一段时间了，但是并没有修复。正如我所提到的：这种情况只会“有时”出现，在调试时可能会发生20次中的一次。但它会删除我的解决方案中所有CSS文件中显示的属性。 - René Stalder
1

我没有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 */
}

那确实很痛苦，但如果这能解决你的问题，直到微软解决这个bug...
0

我知道这是一个老帖子，但我仍然有同样的问题。

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

一旦你注意到VS2010搞砸了CSS代码，停止调试，转到CSS文件选项卡，然后按撤消按钮。你的CSS代码回到了VS2010搞砸之前的状态。编译并且它可以工作。

我很快就要尝试VS2012了，有人知道那里是否已经解决了吗？

在过去的几年里，我没有注意到这个 bug。我使用 VS2012 已经有 6 个月了，但是这种情况从未发生在我身上。但一定要有人尝试使用我在初始问题中提交的代码，因为我已经好几年没有使用原始 CSS 了（总是在编译前使用带有 VS 插件的 SCSS 编译器）。 - René Stalder
0

我也遇到了完全相同的问题！

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

我没有安装它们，而且在不同的计算机和开发环境中也会出现这种情况。 - René Stalder
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接