我需要在IE7+和所有现代浏览器中运行。我使用jQuery,并乐于依赖它。这必须与其他html元素密切集成,因此我不想使用像Raphael之类的东西来绘制它。图像存在问题,因为它们难以平稳缩放。
我尝试了箭头的Unicode字符(html实体⇦,⇧,⇨和⇩)。这本来是一个解决方案,但它们在每个浏览器中呈现非常不同。使用此方法的其他问题包括不能至少使箭头内部不透明。
理想情况下,我可以用渐变填充箭头。
你仍然可以使用 ⇦
,即你在问题中指定的那个。
如果你希望它们看起来更大,可以使用CSS改变字体大小。
同时可以使用CSS构建;)http://jsfiddle.net/xJrpq
下面是CSS版本的代码:
HTML
<div class="b"></div>
CSS
.b {
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid black;
width: 0;
height: 0;
}
h1
标签包裹它们真的非常糟糕,会影响语义。 - Lea Verou↑↓←→↔↕
Unicode : 2190 -> 2195
使用HTML代码
→ ( →
或者 →
)
← ( ←
或者 ←
)
↑ ( ↑
或者 ↑
)
↓ ( ↓
或者 ↓
)
例子: a→b→c
以上例子的代码是 a→b→c
如果你想要更多类似的代码,请参考: http://character-code.com/arrows-html-codes.php
希望这能帮到你。
在这种情况下,我可能会选择使用svg
,并为了满足IE 7的要求,我会使用vml
作为备选方案。有一些将svg
转换为vml
的工具。此外,两者都类似于图像,但在使用缩放时不会显得很糟糕,因为它们是矢量图形。
如果您对此感兴趣,请查看这里: http://vectorconverter.sourceforge.net/
使用可能由精灵组成的图像。
在下载其他解决方案文件时,您可能会达到与优化图像相同或更大的大小。无论如何,图像是完全可靠的,并且适用于所有浏览器;一个神秘的解决方案虽然很有趣,但可能会成为支持的噩梦(因为在互联网上没有人抱怨,所以当它出现问题时,你不会知道)。
你有很多选择。
选项2可能是最可靠的。选项5在IE7中支持使用MS供应商扩展,如滤镜和书写模式。
.rotated {
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}
另一种解决方案是这样的:
span { font-weight: bold; letter-spacing: -5px}
<span>=></span>
看起来是这样的:=>
(当应用样式时,它会变得更好看,但似乎在这里没有应用样式)
em
呢? 另外,我在我的答案中添加了评论。 - Clyde Lobo