css - 显示细节和摘要的问题以及重新对齐的 webkit 标记(包括 jsfiddle)、CSS3 和 HTML5

Question

我遇到了一个相当微不足道(但很严重)的问题。我已经成功实现了一个功能，允许我通过自定义符号隐藏和扩展内容(由 HTML5 Doctor 提供)，在本例中为“+”和“-”。

Here 我已经在 jsfiddle 中成功实现了这段代码的一个版本。以下是 CSS 的摘录:

   summary:-webkit-details-marker {
 color: 000;
display: none;
 font-size: 125%;
 margin-right: 2px;
 animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */  
    height: 10px;
    font-size: 20px;
    overflow: hidden;
}

summary:after {
  background: transparent; 
  border-radius: 5px; 
  content: "+"; 
  color: #000; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

summary:focus {
    outline-style: none;
animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */


}

article > details > summary {
color: transparent; 
font-size: 18px;
    margin-top: 16px;
 animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

details > paragraph {
    margin-left: 24px;

animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

details details {
    margin-left: 36px;
animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

details details summary {
    font-size: 16px;
animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

现在，我想要一个扩展/隐藏符号仅右对齐的版本。我试过了，但是 it fails to function as planned ，文本不仅过早显示，而且符号似乎无法执行任何操作。事实上，我的直觉是我做了一些非常愚蠢的事情，但具有讽刺意味的是，重新调整似乎是唯一有效的方法。

事不宜迟，这里是 jsfiddle 中 CSS 的摘录:

rsummary:-webkit-rdetails-marker {
 color: 000;
display: none;
 font-size: 125%;
 margin-left: 2px;
 animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */  
    height: 10px;
    font-size: 20px;
    overflow: hidden;
}



rsummary:after {
  background: transparent; 
  border-radius: 5px; 
  content: "+"; 
  color: #000; 
  float: right; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}



rdetails[open] rsummary:after {
  content: "-";
float: right;
}



rsummary:focus {
    outline-style: none;
animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}



rarticle > rdetails > rsummary {
color: transparent;
float: right;   
font-size: 18px;
    margin-top: 16px;
 animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}



rdetails > rparagraph {
    margin-right: 24px;

animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

rdetails rdetails {
    margin-right: 36px;
animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

rdetails rdetails rsummary {
    font-size: 16px;
animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

因为我想要两个版本，其中一个标记漂浮在左侧(我已经有了并且可以正常工作，请参阅第一个 jsfiddle)和一个漂浮在右侧，因此正确的标记也必须起作用变得相关。

或者，如果有一种方法可以通过单击横幅本身来隐藏/展开文本，我将不胜感激，因为这是我真正希望它工作的方式，而不是使用 +/- 符号。显然，这意味着删除附加到图像的超链接，但这不是问题。

这几天一直困扰着我，所以我很感激我能得到的任何帮助。谢谢。

Answer 1

问题是您使用的标签在规范中不存在。标签 <details> 和 <summary> 是提供隐藏/展开行为的内容。您不能简单地重命名它们。此外，对附加到这些元素的行为的支持也很有限。具体来说，Chrome、Safari 和 Opera 提供支持，但 IE 或 Firefox 不支持 (http://caniuse.com/#search=details)。

我看到您使用了很多基于非标准的标签。例如:<paragraph>和 <rparagraph>而不是 <p>标签。因此，您的结果将低于预期。

如果您希望在受支持的有限浏览器集上隐藏/展开详细信息和摘要标签的行为，您别无选择，只能使用受支持的标签。如果你想获得更好的支持，你可以使用 Javascript 或 jQuery 实现后备，比如这个:http://mathiasbynens.be/notes/html5-details-jquery .