black left- / right-pointing triangles not the same size

问题

I'm using the black left pointing triangle / right left pointing triangle geometric shapes as links on a website, using their HTML codes ( ◀ and ▶):

&#9664;
&#9654;

For some reason, the triangles are not displayed in the same size, even when I'm using them on a blank page with no other elements.

On Chrome, the left pointing one is slightly larger than the right pointing one. On Firefox, the right pointing one is much larger then the left pointing one.

I have the problem even when there's no CSS at all, on an otherwise blank page.

Any idea what the reason might be or how to fix this?

回答1:

Try the following:

◄ and ►

&#9668 and &#9658

回答2:

Just repeating Mr Lister's comment as an answer, as it worked for me (vote his comment up!)

"... If all else fails, you could try other shapes, such as the left/right pointing pointer ◄ ► or left/right pointing small triangle ◂ ▸." – Mr Lister

I copy/pasted the pointing pointer characters from this comment and it was a consistent size in FF/Chrome/IE.

P.S. Changing the font family didn't make any difference for me.

回答3:

I kept hitting this same problem with character after character. In the end I used the same arrow, triangle, pointer for both right and left. In my case I used a right facing arrow for both the right and left pointers. I flipped the left arrow using transform: scale(-1). Now they look identical.