显示问题的详细信息和摘要以及重新对齐的webkit标记（包括JSFIDLE）、CSS3和HTML5

我碰到了一个相当琐碎（但很严重）的问题。我已经成功地实现了一个函数，它允许我通过一个自定义符号（在本例中是“+”和“-”）隐藏和扩展内容（对HTML5医生表示感谢）

我已经成功地在JSFIDLE中实现了该代码的一个版本。以下是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;
    }
}

现在，我想要一个版本，其中展开/隐藏符号仅与右侧对齐。然而，我尝试了这一点，文本不仅过早地显示，而且符号似乎从任何动作中被禁用。事实上，我的直觉是我做了一些非常愚蠢的事情，尽管具有讽刺意味的是，重组似乎是唯一有效的事情

不用多说，这里是JSFIDLE中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;
    }
}

因为我想要两个版本，其中一个标记向左浮动（我已经有了，并且可以正常工作，请参见第一个JSFIDLE），另一个标记向右浮动，因此右标记也必须起作用

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

---

这已经困扰了我好几天了，所以我非常感谢在这方面能得到的任何帮助。谢谢。

问题是您使用的标签在规范中不存在。标签

和

提供隐藏/扩展行为。您不能简单地重命名它们。此外，对附加到这些元素的行为的支持有限。具体来说，Chrome、Safari和Opera都支持，但IE或Firefox（）都不支持

我看到您使用了相当多的基于非标准的标记。例如：

和

而不是

标记。因此，您的结果将不可预测

如果要在受支持的受限浏览器集上隐藏/展开详细信息和摘要标记的行为，则只能使用受支持的标记。如果您想获得更大的支持，可以使用Javascript或jQuery实现回退，例如下面的：。

Crossbrowser使用详细信息和摘要 在前几天，我需要使用详细信息和摘要标记进行一些实现；突然，我发现了浏览器之间的兼容性问题，所以我在不同的网站上跟踪了几篇文章，有些文章被搞糊涂了。所以我把我的结论带到这个网站上。

1.根据Nicolas Gallagher的，查看CSS中的详细信息和摘要标记：

details, summary { display: block; }

二,。为此标记配置CSS
3.在HTML中，您需要记住，所有详细信息子项都需要位于HTML标记中，如p、a、div或其他；文本输出HTML标记将以关闭状态显示在非webkit浏览器上。
4.在JQuery中，您需要一个小代码来切换状态

注意：这是一个响应良好的低重量实现；让我知道你的机会

---

测试包括代码注释

谢谢回复。我怀疑重新命名的标签可能是问题的根源，但我不能确定。我将按照您的建议将标记重命名为其支持的名称，但这不会与我的工作示例产生冲突，因为标记名称将是相同的吗？我需要一个左浮动隐藏/展开符号和一个右浮动符号。现在，我想坚持使用纯CSS3，因为我对Javascript的了解是不存在的。感谢您提供了一个后备方案，一旦我让它按预期工作，我一定会使用它//对于，DPPUse类，而不是重命名元素。例如，您可以通过以类选择器为目标，以不同的方式设置此摘要元素的样式。您可以在样式表中的类名前加上句点来完成此操作。因此，您可能会有如下内容：.rsummary:after{/*您的样式在这里*/}。是的！它起作用了！：()()()()())())()41我会更新你的答案，并用这个问题的解决方案更新我的主要帖子。非常感谢您的时间和回答//民进党党卫军，嘘！15所需声誉/无论如何，这与积分无关。我很高兴能帮上忙。祝你好运。