我想在 CSS 或 Javascript/JQuery 中创建一个规则的页面效果，for example .我知道这可以通过设置固定的行高并创建适合的背景图像来使用 CSS 来实现。
但是，我更愿意创建矢量解决方案(即没有图像)like this ，但我需要它在 IE 中工作。
是否可以在不使用适用于所有现代浏览器的图像的情况下生成这种效果？
理想的解决方案是检测段落中一行的顶部和底部，并使用 javascript 在它们之间画一条线 - 这样它就可以使用未定义的行高(但我很乐意在必要时定义它们)。
我忘了说文本是动态的。
最佳答案
尝试朝这个方向前进:http://jsfiddle.net/Jw8pw/ 这是非常基本的，但如果您考虑线条边框高度和文本位置，您可以获得更深入的了解。 基本上一切都需要基于 em 高度。使用透明的 div 作为带边框的边距，使用 div 通过边框半径打洞。
刚刚添加了一些:http://jsfiddle.net/julienetienne/Jw8pw/6/
//jquery
var lineHeight = $('#content p').css('line-height') ;
$('.line').css({height: lineHeight },0);
var x = $('#content').height();
$('#paper').css('height', x + 40 +"px");
您将需要编写一个脚本来手动添加行 div，以便它们填充纸张超过溢出但不会太多。
估计在最大情况下您使用的 em 像素数(假设为 40 像素)， 您将执行诸如“文本#content div 的高度”除以自定义 (40px) 比率之类的操作，再加上 10(为了安全起见)，这就是您需要“写入”的行数
#paper 没有溢出，因此欢迎使用更多的 div 行，但过多(如数百个)有点懒惰
关于javascript - CSS/Javascript 中的直纹页效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9851944/