我的可擴展內容在IE上不起作用

Question

任何想法爲什麼此代碼在IE上不起作用？我已經測試了多個版本，據我所知，focus元素應該可以工作，但是由於某種原因，當我點擊它時什麼也沒有發生。

.collapse { 
 
\t text-align:left; 
 
} 
 

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

 

 
.accordian-gradient { 
 
\t 
 
\t /*GRADIENT*/ 
 
\t 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 */ 
 
\t 
 
\t 
 
}

<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>

似乎在緣來進行工作。

編輯：

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>