CSS 2.1 错误：不是已知的属性名称

CSS 2.1 errors: not a known property name

提问by l--''''''---------''''''''''''

Here is my code, I got it from an AJAX sample:

这是我的代码，我是从 AJAX 示例中得到的：

body, div, p, h1, h2, h3, h4, ul, li, table
{
    margin:0;
    padding:0;
    border:none;
}

body
{
    background: #B4B4B4 url(images/body_bg.gif) repeat left top;    
    font-family: Tahoma, Arial, sans-serif;
    font-size:75%;
}

/* Master Page Layout */
#master_header
{
    margin: -1px auto 0 auto;
    width: 800px;
}

#master_headertop
{
    background: url(images/headertop_img.jpg) no-repeat left top;
}

#master_headerbottom
{
    background: url(images/headerbottom_img.png) no-repeat left top;
}

#master_page
{
    margin: 5px auto 20px auto;
    width: 800px;
}

#master_menu 
{
    float: left;
    width: 240px;
    padding-right: 10px;
}

.sidebar 
{
    width: 100%;
    margin-bottom: 10px;
}

.sidebarheader
{
    height: 24px;
    padding: 10px 0 0 35px;
    background: url(images/sidebar_header.png) no-repeat left top;
    color: #FFF;
    font-family: Arial, Sans-Serif;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

.sidebarcontent
{   
    border: 1px solid #0F2543;
    padding: 20px 20px 20px 30px;
    line-height: 1.5em;
    font-weight: bold;
}

#master_sidebarSamples
{   
    padding-top: 72px;
    background: #FFF url(images/samples_bg.gif) no-repeat left top;
}

#master_sidebarWalkthroughs
{
    padding-top: 72px;
    background: #FFF url(images/walkthrough_bg.gif) no-repeat left top;
}

.sidebarcontent a
{
    padding: 2px 5px;
    color: #5377A9;
    text-decoration: none;
}

.sidebarcontent a:hover
{
    background-color: #0F2543;
    color: #FFF;
}

.sidebarcontent a:visited
{
    font-weight: normal;
}

#master_content
{
    float: left;
    width: 550px;
    margin-right: -550px;
    color: #666666;
}

/*
#master_content a
{
    color: #5377A9;
    padding: 1px;
}

#master_content a:link
{
}

#master_content a:visited
{
}

#master_content a:hover
{
    background-color: #BFBFBF;
    color:#FFF;
}
*/

#master_content ul
{
    margin: 0 25px 0 30px;
}

#master_contentheader
{
    height: 19px;
    background: url(images/rightcoltop.gif) no-repeat right top;
}

#master_contentplaceholder
{
    padding: 30px 20px 40px 20px;
    border-left: 1px solid #0F2543;
    border-right: 1px solid #0F2543;
    border-bottom: 1px solid #0F2543;
    background-color: #EFEFEF;
    line-height: 1.5em;
}

#master_contentfooter
{
    clear: both;
    padding: 10px 0 5px 10px;
    color: #333;
    font-size: 0.8em;
    letter-spacing: 0.1em;
}

/* Content Page Layout             */
.demoarea {
    padding:20px;
    background:#FFF url(images/demotop.png) no-repeat left top;
}

.demoarea p 
{
    padding:5px;
}

.demoheading {
    padding-bottom:20px;
    color:#5377A9;
    font-family:Arial, Sans-Serif;
    font-weight:bold;
    font-size:1.5em;
}

.demobottom {
    height:8px;
    background:#FFF url(images/demobottom.png) no-repeat left bottom;
}


.heading {
    padding: 1em 0 1em 0;
    color:#5377A9;
    font-family:Arial, Sans-Serif;
    font-weight:bold;
    font-size:1.2em;
}

.subheading{
    padding:.8em 0 0.5em 0;
    color:#0F2543;
    font-weight:bold;
    font-family:Arial, Sans-Serif;
    font-size:1.1em;
}

p {}

em {font-style:italic}

i {font-style: italic;}

strong {font-weight:bold;}

.codeReference
{
    font-family: 'Courier New', Monospace;
    font-style: normal;
    font-weight: bold;
}

pre, code {
    display:block;
    margin:15px 15px 15px 0;
    padding:10px;
    border:1px dashed #CCC;
    background-color:#FFF;
    color:#000;
    font-family:'Courier New', Monospace;
    font-size:0.9em;
    font-style:normal;
}

.releaseList {
    list-style-type:disc;
}


/* Styles for the Animation Reference */
.animationReferenceTable
{
}

.animationReferenceRow
{
}

.animationReferenceField
{
    text-align: right;
    vertical-align: top;
    padding-top: 5px;
}

.animationReferenceCode
{
    margin-top: 5px;
    vertical-align: top;
    font-family: 'Courier New', Monospace;
    font-style: normal;
    font-weight: bold;

    display:block;
    background-color:#FFF;
    color:#000;
    font-family:'Courier New', Monospace;
    font-size:0.9em;
    font-style:normal;
    font-weight: bold;
    margin-bottom: 5px;
}

.animationReferenceItems
{
    vertical-align: top;
}

.animationReferenceItemTable
{
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.animationReferenceItemRow
{
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.animationReferenceItem
{
    width: 100%;
    padding: 0px;
    margin: 0px;
    padding-bottom: 10px;
}

.animationReferenceItemCode
{
    display:block;
    background-color:#FFF;
    color:#000;
    font-family:'Courier New', Monospace;
    font-size:0.9em;
    font-style:normal;
    font-weight: bold;
}

/******************************/
/**Styling information specific to individual content pages**/

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a
{
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

#master_content .accordionHeader a:hover
{
    background: none;
    text-decoration: underline;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

/*Cascading DropDown*/

/*CollapsiblePanel*/
.collapsePanel {

    background-color:white;
    overflow:hidden;
}

.collapsePanelHeader{   
    width:100%;     
    height:30px;
    background-image: url(images/bg-menu-main.png);
    background-repeat:repeat-x;
    color:#FFF;
    font-weight:bold;
}

#master_content .collapsePanelHeader a {color:#FFF;}
#master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;}

/*Confirm Button*/

/* DropShadow */

#master_content .dropShadowPanel span {color:white;text-decoration:underline;}
#master_content .dropShadowPanel span:hover {text-decoration:none;}


.dropShadowPanel 
{   
    width:300px;    
    background-color:#5377A9;       
    color:white;
    font-weight:bold;       
}

/*Drag Panel*/
.dragMe {
    width:100%;
    height:21px;
    background-color:#FFF;
    background-image:url(images/header-opened.png);
    text-align:center;
    cursor:move;
    font-weight:bold;
}

.overflowHidden {overflow:hidden;}

.overflowScroll {overflow:hidden;}

/*Hover Menu*/
.popupMenu {
    position:absolute;
    visibility:hidden;
    background-color:#F5F7F8;
    opacity:.9;
    filter: alpha(opacity=90);
}

.popupHover {
    background-image:url(images/header-opened.png);
    background-repeat:repeat-x;
    background-position:left top;
    background-color:#F5F7F8;
}

/* PagingBulletedList */
.selectIndex {
    font-weight: bold;
    text-decoration:none;
}
.unselectIndex {
    font-weight:normal;
    text-decoration:underline;
}


/*Modal Popup*/
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}

.sampleStyleA {
    background-color:#FFF;
}

.sampleStyleB {
    background-color:#FFF;
    font-family:monospace;
    font-size:10pt;
    font-weight:bold;
}

.sampleStyleC {
    background-color:#ddffdd;
    font-family:sans-serif;
    font-size:10pt;
    font-style:italic;
}

.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}

/*Popup Control*/
.popupControl{
    background-color:White;
    position:absolute;
    visibility:hidden;
}

/*Reorder List*/
.dragHandle {
    width:10px;
    height:15px;
    background-color:Blue;
    background-image:url(images/bg-menu-main.png);
    cursor:move;
    border:outset thin white;
}

.callbackStyle {
    border:thin blue inset;     
}

.callbackStyle table {
    background-color:#5377A9;   
    color:Black;
}


.reorderListDemo li {
    list-style:none;
    margin:2px;
    background-image:url(images/bg_nav.gif);
    background-repeat:repeat-x;
    color:#FFF;
}

.reorderListDemo li a {color:#FFF !important; font-weight:bold;}

.reorderCue {
    border:dashed thin black;
    width:100%;
    height:25px;
}

.itemArea {
    margin-left:15px;
    font-family:Arial, Verdana, sans-serif;
    font-size:1em;
    text-align:left;
}


/* Rounded Corners*/

.roundedPanel
{   
    width:300px;    
    background-color:#5377A9;   
    color:white;
    font-weight:bold;       
}

/* ResizableControl */

.frameImage
{
    width:130px;
    height:65px;
    overflow:hidden;
    float:left;
    padding:3px;
}

.frameText
{
    width:100px;
    height:100px;
    overflow:auto;
    float:left;
    background-color:#ffffff;
    border-style:solid;
    border-width:2px;
    border-color:Gray;
    font-family:Helvetica;
    line-height:normal;
}

.handleImage
{
    width:15px;
    height:16px;
    background-image:url(images/HandleHand.png);
    overflow:hidden;
    cursor:se-resize;
}

.handleText
{
    width:16px;
    height:16px;
    background-image:url(images/HandleGrip.png);
    overflow:hidden;
    cursor:se-resize;
}

.resizingImage
{
    padding:0px;
    border-style:solid;
    border-width:3px;
    border-color:#B4D35D;
}

.resizingText
{
    padding:0px;
    border-style:solid;
    border-width:2px;
    border-color:#7391BA;
}

/*Textbox Watermark*/

.unwatermarked {
    height:18px;
    width:148px;
    font-weight:bold;
}

.watermarked {
    height:20px;
    width:150px;
    padding:2px 0 0 2px;
    border:1px solid #BEBEBE;
    background-color:#F0F8FF;
    color:gray;
}   

/* Rating */
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url(Images/FilledStar.png);

}

.emptyRatingStar {
    background-image: url(Images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(Images/SavedStar.png);
}


/*Toggle Button*/

/*Setup*/
.walkthrough li {padding-bottom:5px;}

/*Using a sample extender*/

/*Creating a new extender*/
.walkthroughNote {
    padding-left:25px;
    font-style:italic;
}

/*Other neat stuff*/





/************ PasswordStrength Related Styles ***********************/
.TextIndicator_TextBox1
{
     background-color:Gray;
     color:White;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;  
     padding: 2px 3px 2px 3px;   
}

.BarIndicator_TextBox2
{
    color:Blue;
    background-color:Blue;
}

.BarBorder_TextBox2
{
    border-style:solid;
    border-width:1px;
    width:200px;
    vertical-align:middle;
}

.TextIndicator_TextBox3
{
     background-color:Blue;
     color:Yellow;
     font-size:small;
     font-variant:small-caps;  
     padding: 2px 3px 2px 3px;   
}

.TextIndicator_TextBox3_Handle
{
    width:16px;
    height:14px;
    background-image:url(images/Question.png);
    overflow:hidden;
    cursor:help;
}

.dynamicPopulate_Normal 
{   
    border:silver 1px inset;
    padding:2px;
    text-align:center;
    height:2em;
    margin:5px;
    width:200px;
}

.dynamicPopulate_Updating 
{
    background-image:url(images/loading.gif);
    background-repeat:no-repeat;
    border:silver 1px inset;
    text-align:center;
    padding:2px;
    height:2em;
    margin:5px;
    width:200px;
}
/************ MaskedEdit Related Styles ***********************/
.MaskedEditFocus
{
    background-color: #ffffcc;
    color: #000000;
}
.MaskedEditMessage
{
    color: #ff0000;
    font-weight: bold;
}
.MaskedEditError
{
    background-color: #ffcccc;
}
.MaskedEditFocusNegative
{
    background-color: #ffffcc;
    color: #000000;
}
.MaskedEditBlurNegative
{
    color: #ff0000;
}

.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: lemonchiffon;
    color: red;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: black;
    font-weight:bold;
}

.validatorCalloutHighlight 
{
    background-color: lemonchiffon; 
}

I am getting the following errors:

我收到以下错误：

Error 1 Validation (CSS 2.1): 'opacity' is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 402 2 C:...\WebSite3\ Error 2 Validation (CSS 2.1): 'filter' is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 403 2 C:...\WebSite3\ Error 3 Validation (CSS 2.1): 'filter' is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 427 2 C:...\WebSite3\ Error 4 Validation (CSS 2.1): 'opacity' is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 428 2 C:...\WebSite3\ Error 5 Validation (CSS 2.1): 'lemonchiffon' is not a valid value for the 'background-color' property. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 738 23 C:...\WebSite3\ Error 6 Validation (CSS 2.1): 'lemonchiffon' is not a valid value for the 'background-color' property. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 759 23 C:...\WebSite3\

错误 1 ​​验证 (CSS 2.1)：“opacity”不是已知的 CSS 属性名称。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 402 2 C:...\WebSite3\ Error 2 Validation (CSS 2.1): 'filter' is not a known CSS property姓名。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 403 2 C:...\WebSite3\ Error 3 Validation (CSS 2.1): 'filter' is not a known CSS property姓名。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 427 2 C:...\WebSite3\ Error 4 Validation (CSS 2.1): 'opacity' is not a known CSS property姓名。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 428 2 C:... \WebSite3\ 错误 5 验证 (CSS 2.1)：'lemonchiffon' 不是 'background-color' 属性的有效值。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 738 23 C:...\WebSite3\ Error 6 Validation (CSS 2.1): 'lemonchiffon' is not a valid value for “背景颜色”属性。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 759 23 C:...\WebSite3\ 背景颜色'属性。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 759 23 C:...\WebSite3\ 背景颜色'属性。C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 759 23 C:...\WebSite3\

Does anyone know what I am doing wrong?

有谁知道我做错了什么？

回答by balexandre

Validation errors are all fine, because they are using the proper CSS 2.1 Documentation and your trying to validate CSS3 properties in a CSS 2.1 context.

验证错误都很好，因为它们使用了正确的 CSS 2.1 文档，并且您尝试在 CSS 2.1 上下文中验证 CSS3 属性。

What you probably want is to build your application bypassing the CSS Errors, no matter what they are, for that you can transform this "errors" into warningsusing Visual Studio Options:

您可能想要构建绕过 CSS 错误的应用程序，无论它们是什么，因为您可以使用 Visual Studio 选项将此“错误”转换为警告：

in The Visual Studio menu click on:

在 Visual Studio 菜单中单击：

Tools> Options...and drill down Text Editor> CSS> Miscellaneous

Tools>Options...并深入Text Editor> CSS>Miscellaneous

and just make the CSS Errors to be treated as warnings

并让 CSS 错误得到处理 as warnings

2013 version

2013版

回答by Brandon

You're validating your stylesheets against CSS 2.1, but those properties are CSS3.

您正在根据 CSS 2.1 验证样式表，但这些属性是 CSS3。

Change your stylesheet validation to CSS3.

将样式表验证更改为 CSS3。

回答by Chris Conway

The errors you are getting are validation errors. Opacity and filter are not in the CSS 2.1 spec despite being supported by all major browsers.

您收到的错误是验证错误。尽管所有主要浏览器都支持不透明度和过滤器，但它们不在 CSS 2.1 规范中。

回答by Bill Daly

I realize that this response is a little late, but someone else may find this information useful.

我意识到此回复有点晚，但其他人可能会发现此信息有用。

To make the filter tag warning go away in VS2010 (as opposed to just ignoring it), close VS2010 and edit the following file: C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\1033\schemas\CSS\css30.xml

要使过滤器标签警告在 VS2010 中消失（而不是仅仅忽略它），请关闭 VS2010 并编辑以下文件： C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\1033\schemas\CSS\css30.xml

You need to change the filterproperty from enum to composite.

您需要将filter属性从枚举更改为复合。

Around line 387, you should find the following text: <cssmd:property-def _locID="filter" _locAttrData="description,syntax" type="enum" ...

在第 387 行附近，您应该找到以下文本： <cssmd:property-def _locID="filter" _locAttrData="description,syntax" type="enum" ...

Change it to: <cssmd:property-def _locID="filter" _locAttrData="description,syntax" type="composite" ...

将其更改为： <cssmd:property-def _locID="filter" _locAttrData="description,syntax" type="composite" ...

Then restart VS2010.

然后重启VS2010。

回答by Jason Gennaro

You need to validate this as CSS3

您需要将此验证为 CSS3

http://jigsaw.w3.org/css-validator/#validate_by_input+with_options

http://jigsaw.w3.org/css-validator/#validate_by_input+with_options

When you do that, you will two errors for your opacitystyles and a bunch of warnings dealing with duplicated background-colors.

当你这样做时，你的opacity样式会出现两个错误和一堆处理重复的警告background-colors。