확장 가능한 컨텐츠가 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>

있습니까? 매우 신뢰할 수있는 내부 스타일 시트이며 자바 스크립트 나 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>