Question

我有一个自定义标记ab，其定义如此http://jsfiddle.net/JcLx4/2/我想在文本绘制后面的黑线直到行尾。我怎么做到这一点？

Answer 1

将ab { display: block; }添加到CSS。演示：http://jsfiddle.net/JcLx4/6/

默认情况下，未知元素是内联的（display: inline）。

如果您希望样式在Internet Explorer 8及更早版本中运行，则需要使用一些JavaScript。 Karl Nicoll的回答描述了一种适用于屏幕媒体的解决方案，但它仍然无法启用打印媒体的样式。如果这是你想要的，你可以使用IE Print Protector的这个修改版本：

/*! 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>样式。

Answer 2

添加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|..

Answer 3

你是说这个意思吗？：http://jsfiddle.net/JcLx4/7/

我添加了display:block以使其成为块元素。

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

Answer 4

您需要在CSS中添加display:block。

未定义的元素或浏览器不知道的元素将始终默认为内联（即与<span></span>标记相同），因此您必须手动使它们成为块元素。

请记住，如果您打算使用此元素，则需要使用以下JavaScript代码来使其在旧版本的Internet Explorer（9.0之前版本）中运行：

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

当放置在HTML的<head></head>中时，它会强制IE将其识别为元素。没有它，Internet Explorer将忽略您的标记。

强制背景绘制直到行尾

4 个答案: