webkit上的-moz-background-inline-policy [英] -moz-background-inline-policy on webkit
本文介绍了webkit上的-moz-background-inline-policy的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Webkit中是否存在 -moz-background-inline-policy ？此属性基本上允许您指定如何为内联元素的每行绘制背景。我附加到不同浏览器上的同一元素的图像。
这是firefox的结果（ -moz-background-inline-policy：each-box; ）
这是在谷歌浏览器（我试过 -webkit-background-inline-policy ，但似乎它不存在） p>
UPDATE
由于Webkit没有后台策略属性，我试图使用jQuery找到一个不同的解决方案。我在每行文本后面添加了一个额外的span。没关系，除了文本没有正确测量的事实。您可以在这里看到两个示例：
- 原始解决方案（后台内联策略）： http://jsfiddle.net/notme/mCnGy/5/
- 新解决方案）： http://jsfiddle.net/notme/my3br/1/
解决方案
Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery .fn.wrapLines = function（openTag，closeTag）{
var dummy = this.clone（）。css（{
top：-9999，
left：-9999，
position：'absolute'，
width：this.width（）
}）appendTo（this.parent（）），
text = dummy.text S + \ s + / g）;
var words = text.length，
lastTopOffset = 0，
lines = []，
lineText ='';
for（var i = 0; i< words; ++ i）{
dummy.html（
text.slice（0，i）.join ）+ text [i] .replace（/（\ S）/，'$ 1< span />'）+ text.slice（i + 1）。
var topOffset = jQuery（'span'，dummy）.offset（）。top;
if（topOffset！== lastTopOffset& i！= 0）{
lines.push（lineText）;
lineText = text [i];
} else {
lineText + = text [i];
}
lastTopOffset = topOffset;
}
lines.push（lineText）;
this.html（openTag + lines.join（closeTag + openTag）+ closeTag）;
dummy.remove（）;
};
//感谢@thirtydot
var fixIt = function（）{
// remove previous .dummy
$（'。dummy'）。
$（'div.node-title-text'）。each（function（index）{
var dummy = $（this）.clone（）。removeClass ）.addClass（'dummy'）。appendTo（$（this）.parent（））;
console.log（dummy）;
$（dummy）.wrapLines（'< span> >'，'< / span>< / span>'）;
var padding = 15;
dummy.css（{
left： -padding，
right：-padding
}）。find（'> span'）。css（'padding-left'，padding * 2）;
} ;
};
$（window）.load（function（）{
$（window）.resize（fixIt）.resize（）; // trigger resize event onLoad
}
解决方案
：
http://jsfiddle.net/三十点/ UGBXD / 3 /
这是后代的完整代码：
JS ：
//感谢@Peter Bailey - http://stackoverflow.com/questions/2456442/how -can-i-highlight-the-line-of-text-that-is-nearest-to-the-mouse / 2456582＃2456582＃2456582
jQuery.fn.wrapLines = function（openTag，closeTag）{
var dummy = this.clone（）。css（{
top：-9999，
left：-9999，
position：'absolute'，
width：this.width （）
}）。appendTo（this.parent（）），
text = dummy.text（）。match（/ \S + \s + / g）;
var words = text.length，
lastTopOffset = 0，
lines = []，
lineText ='';
for（var i = 0; i< words; ++ i）{
dummy.html（
text.slice（0，i）.join ）+ text [i] .replace（/（\ S）/，'$ 1< span />'）+ text.slice（i + 1）。
var topOffset = jQuery（'span'，dummy）.offset（）。top;
if（topOffset！== lastTopOffset& i！= 0）{
lines.push（lineText）;
lineText = text [i];
} else {
lineText + = text [i];
}
lastTopOffset = topOffset;
}
lines.push（lineText）;
this.html（openTag + lines.join（closeTag + openTag）+ closeTag）;
dummy.remove（）;
};
var fixIt = function（）{
$（'。dummy'）。remove（）;
$（'div.node-title-text'）。each（function（index）{
// remove previous .dummy
var dummy = $（this）。 clone（）。removeClass（）。addClass（'dummy'）。appendTo（$（this）.parent（））;
$（dummy）.wrapLines（'< span> < / span>< / span>'）;
}）;
};
$（window）.resize（fixIt）.resize（）; //触发调整大小事件onLoad
CSS：
$ b
.node-title {
position：relative;
margin-bottom：16px
}
.node-title-text {
position：relative;
z-index：2
}
.dummy {
position：absolute;
top：0; left：0;
z-index：1
}
.dummy> span {
background：url（'http://i.stack.imgur.com/HPofR.png'）左上角没有重复，
url（'http：//i.stack.imgur .com / C8ImH.png'）top right no-repeat，
url（'http://i.stack.imgur.com/9is9r.png'）top center repeat-x;
}
.dummy> span> span {
visibility：hidden
}
strong>（与yours相同）
< div class =node-title>
< div class =node-title-text>
< a href =＃> Lorem ipsum dolor sit amet，consectetur adipiscing elit。
Sed suscipit fermentum leo eu scelerisque。< / a>
< / div>
< / div>
Does something like -moz-background-inline-policy exist in Webkit? This property basically gives you the opportunity to specify how should background render for each line of an inline element. I attach to images of the same element on different browsers.
This is the result on firefox (with -moz-background-inline-policy: each-box;)
This is on Google Chrome (I've tried -webkit-background-inline-policy, but it seems it doesn't exist)
UPDATE
Since there is no background policy property on Webkit, I'm trying to find a different solution using jQuery. I'm adding an extra span behind each line of text. It's ok, except for the fact that text is not measured properly. You can see both examples in action here:
- Original solution (background inline policy): http://jsfiddle.net/notme/mCnGy/5/
- New solution (jQuery spans): http://jsfiddle.net/notme/my3br/1/
SOLUTION
//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
var dummy = this.clone().css({
top: -9999,
left: -9999,
position: 'absolute',
width: this.width()
}).appendTo(this.parent()),
text = dummy.text().match(/\S+\s+/g);
var words = text.length,
lastTopOffset = 0,
lines = [],
lineText = '';
for (var i = 0; i < words; ++i) {
dummy.html(
text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));
var topOffset = jQuery('span', dummy).offset().top;
if (topOffset !== lastTopOffset && i != 0) {
lines.push(lineText);
lineText = text[i];
} else {
lineText += text[i];
}
lastTopOffset = topOffset;
}
lines.push(lineText);
this.html(openTag + lines.join(closeTag + openTag) + closeTag);
dummy.remove();
};
//thanks @thirtydot
var fixIt = function() {
//remove previous .dummy
$('.dummy').remove();
$('div.node-title-text').each(function(index) {
var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
console.log(dummy);
$(dummy).wrapLines('<span><span>', '</span></span>');
var padding = 15;
dummy.css({
left: -padding,
right: -padding
}).find(' > span').css('padding-left', padding*2);
});
};
$(window).load(function(){
$(window).resize(fixIt).resize(); //trigger resize event onLoad
});
解决方案
This works, but it could probably be made more efficient:
http://jsfiddle.net/thirtydot/UGBXD/3/
Here's the complete code for posterity:
JS:
//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
var dummy = this.clone().css({
top: -9999,
left: -9999,
position: 'absolute',
width: this.width()
}).appendTo(this.parent()),
text = dummy.text().match(/\S+\s+/g);
var words = text.length,
lastTopOffset = 0,
lines = [],
lineText = '';
for (var i = 0; i < words; ++i) {
dummy.html(
text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));
var topOffset = jQuery('span', dummy).offset().top;
if (topOffset !== lastTopOffset && i != 0) {
lines.push(lineText);
lineText = text[i];
} else {
lineText += text[i];
}
lastTopOffset = topOffset;
}
lines.push(lineText);
this.html(openTag + lines.join(closeTag + openTag) + closeTag);
dummy.remove();
};
var fixIt = function() {
$('.dummy').remove();
$('div.node-title-text').each(function(index) {
//remove previous .dummy
var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
$(dummy).wrapLines('<span><span>', '</span></span>');
});
};
$(window).resize(fixIt).resize(); //trigger resize event onLoad
CSS:
.node-title {
position: relative;
margin-bottom: 16px
}
.node-title-text {
position: relative;
z-index: 2
}
.dummy {
position: absolute;
top: 0; left: 0;
z-index: 1
}
.dummy > span {
background: url('http://i.stack.imgur.com/HPofR.png') top left no-repeat,
url('http://i.stack.imgur.com/C8ImH.png') top right no-repeat,
url('http://i.stack.imgur.com/9is9r.png') top center repeat-x;
}
.dummy > span > span {
visibility: hidden
}
HTML: (same as yours)
<div class="node-title">
<div class="node-title-text">
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed suscipit fermentum leo eu scelerisque.</a>
</div>
</div>
这篇关于webkit上的-moz-background-inline-policy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
