의사 요소가 IE9에서 공간을 차지합니다.

div가 텍스트 입력 필드처럼 동작하기를 원합니다.의사 요소가 IE9에서 공간을 차지합니다.

다음은 전체 소스 코드의 예입니다 :

HTML :

<div contenteditable='true'></div>

CSS :

div:empty:before { 
    content: 'Type here...'; 
    color: #ccc; 
} 

div{ 
    padding: 4px; 
    border: 1px solid #ccc; 
}

는 IE9에서 fiddle를 참조하십시오.

IE9에서 문제는 키보드 캐럿이 끝에 표시된다는 것입니다.

크롬에서는 처음부터 캐럿이 올바른 것입니다.

문제는 pseudo : before 요소가 IE9에서 공간을 차지하고있는 것처럼 보입니다. 크롬처럼 자리를 비우지 않게하려면 어떻게해야합니까 (자리 표시 자처럼 행동)?

가 IE에서 작동하게하려면

div:empty:before { 
    content: 'Type here...'; 
    color: #ccc; 
    display: inline-block; 
    width: 0; 
    white-space: nowrap; 
}

display: inline-block은 가능한 폭을 설정할 수 있습니다.

width: 0은 요소가 공간을 차지하지 않도록합니다.

white-space: nowrap

는 (그렇지 않으면 때문에 제한된 공간의 라인을 깰 것)

한 줄에있을 텍스트를 강제로

2015-05-19 14:19:59

답변