2017-11-07 3 views
1

내 HTML은 다른 브라우저 및 버전에서 작동되는 오디오 요소를 숨 깁니다 오디오 태그는 예를 들어, 배설 브라우저에서 배설의 높이가파이어 폭스-57 : 높이 CSS를 통해 공급하지만, 다음과 같이

<div> 
    <div> 
     <table> 
      <tbody> 
      <tr> 
       <td> 
        <audio src="audio1.mp3" controls="controls"></audio> 
       </td> 
       <td title="3b15f6c1fee191">3b15f6c1fee191</td> 
       <td ></td> 
       <td ></td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<div> 
    <div> 
     <table> 
      <tbody> 
      <tr> 
       <td> 
        <audio src="audio2.mp3" controls="controls"></audio> 
       </td> 
       <td title="3c15f6c1fee1f1">3c15f6c1fee1f1</td> 
       <td ></td> 
       <td ></td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<div> 
    <div> 
     <table> 
      <tbody> 
      <tr> 
       <td> 
        <audio src="audio3.mp3" controls="controls"></audio> 
       </td> 
       <td title="`">3a15f6bff18421</td> 
       <td ></td> 
       <td ></td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
...... 

파이어 폭스-57에서 다음과 같이 보여줍니다 : 내 DOM

audio{ 
    height:30px 
} 

에 그러나에 다음과 CSS를 추가 한

without css

극복하기 위해 파이어 폭스-57은 숨 깁니다 오디오 태그는 다음과 같습니다 :

working fine in chrome

내가 브라우저에서 높이의 원활한 동작을 가지고 어떻게 혼란 스러워요 다음과 같이 0

hide Audio tag

다른 브라우저에서 좋은 실행합니다.

답변

1

FF 지원 (제대로)에만 <video> 태그에 widthheight 속성 때문에, 나는 <audio> 하나뿐만 아니라 CSS를 통해를 설정할 수 없습니다, 같아요.

height은 페이지 매김보다는 비디오 자체의 모양, 크기 및 비율을 제어하기위한 것입니다. <audio>에는 설정할 수있는 width 또는 height이 없습니다.

다른 브라우저에서는 오디오 플레이어 자체의 크기를 설정하는 데 사용하지만 어쨌든 FF 동작은 어쨌든 나에게 의미가있는 것처럼 보입니다.

문제가 제대로 간격과 같은 당신이 더 테이블 셀에 CSS 높이를 적용 할 것 요소 ... 어떤 페이지를 매기는 경우 : 인라인 요소 인

tr { 
    height:30px 
} 

대한 추가 정보를 원하시면 here

을, 당신 어쨌든 시도 할 수 있습니다 :

audio { 
    width:20px; 
    height:30px; 
    display: block 
} 

는 아마로에 작동하지만 거의 높이에 ...

,