答案 0 :(得分:0)
首先,您使用table,然后在进入后台之前进行分析。
<table id="container">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</table>
因此上面的代码部分使...
您已经在所有TD's(使用课程.rule
)
意思是因为您使用了基于百分比的宽度(它将填充TD's
宽度)并在此处减小尺寸+质量。
SVG会对质量有所帮助,但我不认为它可以解决您的问题。
如果您想要replicate a ruler,可以使用jQuery.Ruler插件,我的JQuery Ruler或this Pen使用CSS渐变来执行此操作。
在下面的情况下(weave),我拿了我的JQuery Ruler,并将其用作没有编号标记的图像。在重复的背景下。 (注意我并没有将它应用于TD&#39;因为在这种情况下你想要它在父母身上。
.ruler {
height: 27px;
background: #eee;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AUREBciNhBoqgAAAIZJREFUWMPt2DEKAyAQBMA9n6An+P/3+QL17lLFIkUigRCQXdhumwEtVHrvuCFJVeMKCC4JIYQQQgghhBBCCCGEEELIXyFjDMw5d9dau2YGM4OqhrvD3RERu695vjhF5G1VNVJK+NTT3d1Hq7V29I6vtR7tSilHu5zz1ztedkJ+FAFwxb/WA0m1Oj6D5YBIAAAAAElFTkSuQmCC');
}
&#13;
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<div class="ruler"></div>
&#13;
答案 1 :(得分:0)
使用SVG图像时,闪烁消失了。 但是,图像之间的间隔并不总是相同的。 这似乎是一个小调整(我认为它不能在&#34;一半&#34;像素上显示任何内容)。
可以重现 fiddle
尝试非常缓慢地调整范围。
#container .rule{
background-image : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='40' height='80'><rect x='0' y='1' width='1' height='100'/><rect x='10' y='1' width='1' height='30'/><rect x='20' y='1' width='1' height='50'/> <rect x='30' y='1' width='1' height='30'/></svg>");
background-size: 100% 80px;
}