표 셀 불일치 표시.

버튼은 아직 앵커가 할 용기를 기입하지 않습니다. 두 태그 사이에 근본적으로 다른 은 무엇인가?

<div class="table"> 
    <a href="#">A</a> 
    <a href="#">B</a> 
    <a href="#">C</a> 
</div> 

<div class="table"> 
    <button href="#">A</button> 
    <button href="#">B</button> 
    <button href="#">C</button> 
</div> 


.table { 
    display: table; 
    width: 100%; 
    outline: 1px solid red; 
} 

.table > * { 
    display: table-cell; 
    outline: 1px solid lightgreen; 
}

출처

2013-05-08 Jeffpowrs

나도 알아낼 수 없었습니다. 나는 또한 호기심이 있습니다! – Jondlm

더 흥미롭게도 : http://jsfiddle.net/dSVGF/2/ :) – Passerby

@Passerby, 규칙 ".table> *"은 직계 자식에게만 적용되므로 이론적으로 div (중첩 단추는 아님) 버튼 B와 스팬 (다시 말해 중첩 단추가 아닌)이이 규칙에 적용되어야합니다. 버튼 태그는 일부 브라우저에서 "display : table-cell"을 허용하지 않기 때문에 "B"버튼은 루프에서 제외됩니다. – BDawg

이 요소들의 근본적인 차이점은 <button>이 (적어도 일부 브라우저에서는) 대체 된 요소로 취급되며 비 CSS 브라우저 기본 제공 메커니즘을 사용하여 렌더링된다고 가정합니다. Bugzilla에는 이로 인해 발생하는 버튼의 렌더링 제한에 대한 몇 가지 문제가 있습니다 (예 : https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9 +와 Opera는 <button>을 대체 요소로 취급하지 않는 것으로 보입니다. 이는 최신 HTML spec에 따라 더 정확하지만 CSS에서는 아직 명확하지 않습니다.

출처

2013-07-08 09:04:26

-2

A 버튼은 등 텍스트, 이미지

앵커 태그는 하이퍼 링크에 대한 특정 같은 내 물건을 올려 수있는 클릭 할 수있는 요소이다.

출처 : 버튼 태그가 실제로 수용 여부

출처

2013-05-13 20:10:22

-1 전체적으로 신뢰할 수없는 W3 Schools를 사용했습니다. – Sparky

나는 이것이 HTML 질문 이상의 CSS 질문이라고 생각합니다. 아마도 브라우저 스타일 시트에서는 인스펙터의 어떤 속성도 이에 영향을 미치지 않는 것 같습니다. – Jeffpowrs

w3schools.com "디스플레이 : 테이블 셀은"분명히, 브라우저에 따라 달라집니다. Chrome 개발자 도구를 신속하게 점검했습니다. 계산 된 스타일에서 버튼 표시가 인라인 블록으로 설정되었습니다. IE10에서 같은 것을 시도해 보았을 때, 변경 사항을 받아 들였고 버튼은 실제로 테이블 셀로 크기가 조정되었습니다.

출처

2013-07-08 08:23:48 BDawg

표 셀 불일치 표시.

답변

관련 문제