입력과 같은 요소에

Question

input.icon 
{ 
    border: 0;  
    cursor: pointer; 
    margin: 0; 
    padding: 0; 
    width: 16px; 
    height: 16px; 
    text-indent: -1000em; 
} 
input.edit {   
    background: transparent url('/edit.png') no-repeat center top; 
} 

을 '쿼리 전송'태그 값이 IE에서 텍스트 속성 표시하고 제출

<input type="submit" class="icon edit" onclick="...." /> 

또한 이미지에 텍스트없이, 파이어 폭스에서 잘 렌더링합니다. IE에서는 value 속성의 텍스트를 보여줍니다.

왜 그렇습니까? 사실 나는 value 속성을 설정하지 않고 'submit query'로 기본값을 설정하고 있습니다. 아니, 내가 너무 두번째 정의를 반드시 변경 이유

input.icon { 
... 
} 
input.icon .edit { 
... 
} 

을하지만 나를 위해 작동하지 않았다 :

입력을

또한, 나는 수행하여 내 CSS는 더 구체적으로 수 있다고 생각 .edit { .. }

input.icon .edit가 왜 작동하지 않습니까?

div 요소에 이러한 스타일을 넣을 수도 있습니까? 차이점이 뭐야?

Answer 1

몇 가지 질문이 있습니다. 첫 번째 경우. 나는 IE8에서 문제를 확인할 수 없습니다 :

http://jsfiddle.net/rfYrq/

내가 IE8에서 텍스트를 볼 수 없습니다.

---

질문 2 : "왜 .edit 작업을 input.icon하지 않았다?"

input.icon .edit

의 의미는, icon의 클래스 입력 요소 내의 edit클래스의 어떤 요소. 당신이 정말로 원했던 것은 인 입력이었습니다.은 edit과 icon입니다. 즉,이 같은 것 :

input.icon.edit

---

질문 3 : "난 그냥뿐만 아니라 div 요소에 이러한 스타일을 넣을 수 있을까요?"

예. 버튼의 스타일을 자신의 CSS로 재정의하고 onclick 버튼의 기능을 재정의하는 경우 상황에 따라 div 또는 span 또는 다른 요소를 사용할 수 있습니다.