我的可扩展内容无法在 IE 上运行

Question

知道为什么这段代码不能在 IE 上运行吗？我已经测试了多个版本，据我所知 :focus 元素应该可以工作，但是由于某种原因，当我单击它时没有任何反应。

.collapse {
	text-align:left;
}

.collapse > * + *{
  display:none;
  
 }
.collapse > *{
  cursor:pointer;
  }
  
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}


.accordian-gradient {
	
	/*GRADIENT*/
	background: rgba(168,168,168,1);
/* Old Browsers */background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(168,168,168,1)), color-stop(52%, rgba(203,203,203,1)), color-stop(100%, rgba(234,234,234,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%);
 /* IE 10+ */background: linear-gradient(to bottom, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#eaeaea', GradientType=0 );
/* IE6-9 */
	
	
}

 <div style="width:100%; max-width:750px; text-align:left;" class="collapse" tabindex="4">
     <div style="width:100%; max-width:750px; text-indent:10px; margin-bottom:10px; padding:5px 0px 5px 0px;" class="accordian-gradient">Question<div style="width:20%; float:right; vertical-align:middle; text-align:right; padding-right:5px;">+&nbsp;</div> </div>
     <div style="width:100%; max-width:700px; cursor:default; padding-bottom:10px; margin: 0 auto;">
     <p>Answer goes here</p>
     </div>
  </div>

有什么可以补充的吗？我可以使用的内容非常有限，因为它是相当不可靠的内部样式表，并且没有 javascript 或 jquery。我必须尽可能多地保持 CSS 内联。

谢谢

Answer 1

:focus 选择器允许用于接受键盘事件或其他用户输入的元素。

尝试使用<button> 标签。

button:focus {
  background-color: yellow;
}

<button>Expand me</button>

它似乎在 Edge 中工作。

编辑：

button {
  width: 100%;
  max-width: 750px;
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

p {
  display: none;
  background-color: aqua;
  padding: 20px;
}

button:focus p {
  display: block;
}

span {
  width: 100%;
  max-width: 750px;
  text-align: left;
}

.gradient {
  /*GRADIENT*/
  background: rgba(168, 168, 168, 1);
  /* Old Browsers */
  background: -moz-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(168, 168, 168, 1)), color-stop(52%, rgba(203, 203, 203, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%);
  /* IE 10+ */
  background: linear-gradient(to bottom, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#eaeaea', GradientType=0);
  /* IE6-9 */
}

<button class="gradient">
  <span>Question</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida urna lacus, id tempor nulla tristique dapibus. Nulla efficitur felis iaculis mi aliquet, vel maximus dolor molestie. Nullam efficitur, urna et pretium gravida, enim justo lacinia justo, eget placerat elit nisi id sem. Pellentesque consequat pulvinar turpis, quis euismod velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin nec mattis dui, eget dapibus neque. Aliquam erat volutpat. Integer a dolor sit amet velit auctor egestas. Proin nibh felis, egestas et porta non, tincidunt non nunc. Duis aliquam, enim vulputate porta maximus, mi nunc pharetra turpis, vel vestibulum ipsum risus sit amet purus. Curabitur id bibendum ligula. Aenean ut ipsum sem. Sed placerat auctor accumsan. Morbi mollis id sapien eget ultricies. Cras tristique velit massa, a tincidunt nibh molestie commodo. Maecenas volutpat sit amet massa eu pulvinar.</p>
</button>