배경이 끝날 때까지 배경을 그려야합니다.

사용자 정의 태그 ab이 있습니다. 이렇게 정의되어 있습니다. http://jsfiddle.net/JcLx4/2/ 줄 끝까지 텍스트 줄 뒤로 검은 색 줄을 만들고 싶습니다. 나는 이것을 어떻게 얻을 수 있을까?배경이 끝날 때까지 배경을 그려야합니다.

출처

2011-03-28 Skizit

ab { display: block; }을 CSS에 추가하십시오. 데모 : http://jsfiddle.net/JcLx4/6/

알 수없는 요소는 기본적으로 인라인 (display: inline)입니다.

Internet Explorer 8 및 이전 버전에서 스타일을 사용하려면 몇 가지 JavaScript를 사용해야합니다. 칼 니콜 (Karl Nicoll)의 대답은 스크린 미디어에서 작동 할 수있는 솔루션을 설명하지만 여전히 인쇄 매체의 스타일을 사용할 수는 없습니다.

/*! iepp v1.6.2 MIT @jon_neal */ 
(function(k,o){var a='ab',f=a.split('|'),d=f.length,b=new RegExp('(^|\\s)('+a+')','gi'),h=new RegExp('<(/*)('+a+')','gi'),m=new RegExp('(^|[^\\n]*?\\s)('+a+')([^\\n]*)({[\\n\\w\\W]*?})','gi'),p=o.createDocumentFragment(),i=o.documentElement,n=i.firstChild,c=o.createElement('body'),g=o.createElement('style'),j;function e(r){var q=-1;while(++q<d){r.createElement(f[q])}}function l(u,s){var r=-1,q=u.length,v,t=[];while(++r<q){v=u[r];if((s=v.media||s)!='screen'){t.push(l(v.imports,s),v.cssText)}}return t.join('')}e(o);e(p);n.insertBefore(g,n.firstChild);g.media='print';k.attachEvent('onbeforeprint',function(){var r=-1,u=l(o.styleSheets,'all'),t=[],w;j=j||o.body;while((w=m.exec(u))!=null){t.push((w[1]+w[2]+w[3]).replace(b,'$1.iepp-$2')+w[4])}g.styleSheet.cssText=t.join('\n');while(++r<d){var s=o.getElementsByTagName(f[r]),v=s.length,q=-1;while(++q<v){if(s[q].className.indexOf('iepp-')<0){s[q].className+=' iepp-'+f[r]}}}p.appendChild(j);i.appendChild(c);c.className=j.className;c.innerHTML=j.innerHTML.replace(h,'<$1font')});k.attachEvent('onafterprint',function(){c.innerHTML='';i.removeChild(c);i.appendChild(j);g.styleSheet.cssText=''})})(this,document)

이 var a='ab'을 말한다 위치를 확인 : 만약 당신이 원하는 경우, 당신은 IE 인쇄 수호자의 수정 된 버전을 사용할 수 있습니까? 다른 요소를 추가하려면 |을 구분 기호로 사용하십시오. var a='ab|foo|bar'은 <ab>, <foo> 및 <bar> 스타일링을 사용 설정합니다.

출처

2011-03-28 11:30:16

display: block 추가

ab.s { 
    background: #000000; 
    color: white; 
    display: block 
}

http://jsfiddle.net/JcLx4/9/

을 당신이 당신의 자신의 요소 (ab)를 제작하는 경우, 당신은 이전에 제대로 작동 할 수 있도록 사용자가 원하는 "html5shiv"-like 자바 스크립트 파일을 추가해야합니다 Internet Explorer 버전. 예를 들어

: http://html5shiv.googlecode.com/svn/trunk/html5.js

var z="ab|abbr|article|aside|..

출처

2011-03-28 11:30:36 thirtydot

당신은이 같은 뜻? : http://jsfiddle.net/JcLx4/7/

나는 블록 요소가되도록 display:block을 추가했습니다.

ab.s{ 
    background: #000000; 
    color: white; 
    display:block; 
}

출처

2011-03-28 11:31:10 JohnP

CSS에 display:block을 추가해야합니다.

정의되지 않은 요소 또는 브라우저에서 인식하지 못하는 요소는 기본적으로 인라인으로 설정되므로 (즉, <span></span> 태그와 동일하게 동작합니다) 수동으로 요소를 차단해야합니다.

이 요소를 사용하려는 경우, 당신은 자바 스크립트와 같은 해킹 이용해야한다는 점을 염두에

마 곰 인터넷 익스플로러의 이전 버전 (이전 9.0)에서 작동하도록 그걸 얻기 위해 다음

<script type="text/javascript"> 
    document.createElement("ab"); 
</script>

HTML의 <head></head>에 삽입하면 IE가 해당 요소를 요소로 인식하도록합니다. 이를 사용하지 않으면 Internet Explorer에서 태그를 무시합니다.

출처

2011-03-28 11:31:12

'document.createElement()'는 여전히 인쇄 매체의 요소를 스타일링 할 수 없음을주의하십시오. –

@ 마티아스 - 그걸 몰랐어, 고마워! –

배경이 끝날 때까지 배경을 그려야합니다.

답변

관련 문제