強制背景畫線直到行尾

我有一個自定義標記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。卡爾尼科爾的回答描述了一種可用於屏幕媒體的解決方案，但它仍然不能啓用印刷媒體的樣式。如果這是你想要的，你可以使用IE打印保護的這款改裝版：

/*! 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'？您可以使用|作爲分隔符來添加其他元素。 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 JavaScript文件，以允許它在舊的正常工作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

您需要將display:block添加到您的CSS。

未定義的元素或瀏覽器不知道的元素將始終默認爲內聯（即與<span></span>標記相同），因此您必須手動將它們設置爲塊元素。

不過請記住，如果你打算使用這個元素，你需要使用JavaScript劈像下面得到它在舊版本的Internet Explorer（預9.0）工作：

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

當放置在您的HTML的<head></head>時，它將強制IE將它識別爲一個元素。沒有它，Internet Explorer將忽略你的標籤。

來源

2011-03-28 11:31:12

請注意，document.createElement（）仍然不會啓用打印介質元素的樣式。 – 2011-03-28 11:53:46

@Mathias - 不知道，謝謝！ – 2011-03-28 12:51:16

強制背景畫線直到行尾

回答

相關問題