如何使单个字符在所有浏览器和操作系统中保持一致？

发布于 2024-08-19 00:17:20 字数 1516 浏览 1 评论 0原文

我使用 CSS3 border-radius 在此网站上创建圆形按钮：

但是，由于 Mac 和 Windows 之间（而不是浏览器之间）的字体渲染差异，按钮文本在其边界圆内的居中不一致。按钮在 Windows 中所有支持 CSS3 的浏览器中都能正确呈现，但在 OS X 或 Linux 中则不然。

这是一些更简单的代码，在某种程度上重现了该问题：

<html>
<head>
<title>Rounded Buttons Example</title>
<style type='text/css'>
    div {padding:1em; margin:1em}
    a {text-decoration:none; color:#000;}
    #help_link, #add_link {
        display:block;
        height: 1.4em;
        width: 1.4em;
        text-align:center;
        line-height: 1.4;
        font-size:1.5em;
        padding:0;
        border:.1em solid #000;
        -moz-border-radius:.8em;
        -webkit-border-radius:.8em;
        border-radius:.8em;
    }

    #help_link:hover, #add_link:hover {
        border-width:.15em;
        margin:-.05em;
        -moz-border-radius:.85em;
        -webkit-border-radius:.85em;
        border-radius:.85em;
    }

</style>
</head>
<body>
<div>
    <a id='help_link' href='#'>?</a>
</div>
<div>
    <a id='add_link' href='#'>+</a>
</div>
</body>
</html>

我已经为此苦苦挣扎了一段时间，并且它开始变得混乱。如果这是与 CSS3 规范相关的问题，我可能会放弃它，但在我看来，这是一个跨浏览器字体问题（居中在方形按钮中也不起作用）。有什么想法吗？

编辑

我想澄清一下，我希望按钮位于圆形边框的正中心。主要问题是垂直居中，因为 OS X 和 Windows 中的字体高度不同，即使指定了行高和字体大小。我同意一种涉及在按钮内手动定位角色的解决方案，但我已经尝试过，手动集中在一个操作系统上会对其他操作系统产生不利影响。

原文

I'm using CSS3 border-radius to create circular buttons on this site:

http://hexpreview.com/

However, due to font rendering differences between Mac and Windows (not between browsers), the centering of the button's text within its bounding circle is inconsistent. Buttons render properly in all CSS3 capable browsers in Windows, but not in OS X or Linux.

Here is some simpler code that somewhat reproduces the problem:

<html>
<head>
<title>Rounded Buttons Example</title>
<style type='text/css'>
    div {padding:1em; margin:1em}
    a {text-decoration:none; color:#000;}
    #help_link, #add_link {
        display:block;
        height: 1.4em;
        width: 1.4em;
        text-align:center;
        line-height: 1.4;
        font-size:1.5em;
        padding:0;
        border:.1em solid #000;
        -moz-border-radius:.8em;
        -webkit-border-radius:.8em;
        border-radius:.8em;
    }

    #help_link:hover, #add_link:hover {
        border-width:.15em;
        margin:-.05em;
        -moz-border-radius:.85em;
        -webkit-border-radius:.85em;
        border-radius:.85em;
    }

</style>
</head>
<body>
<div>
    <a id='help_link' href='#'>?</a>
</div>
<div>
    <a id='add_link' href='#'>+</a>
</div>
</body>
</html>

I've been struggling with this for awhile, and it's starting to get messy. If this were a problem related to the CSS3 specification, I would probably let it go, but it seems to me that this is a cross-browser font issue (centering doesn't work in square buttons either). Any ideas?

EDIT

I'd like to clarify that I want the buttons to be in the exact center of the circular border. The main problem is vertical centering due to font heights being different in OS X and Windows even when line-height and font-size are specified. I am ok with a solution that involves manual positioning of the character within the button, but I've tried and manual centering on one OS is adversely affecting the others.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美人如玉 2024-08-26 00:17:20

我发现了问题。原始页面中的字体声明为“Helvetica，sans-serif”。 Windows 没有 Helvetica，因此它以 Arial 呈现。所有 Mac 浏览器都以 Helvetica 进行渲染，因此会出现渲染问题。更改为“Arial，sans-serif”可以解决该问题。

回复收藏 0 原文

平生欢 2024-08-26 00:17:20

呃，

div {text-align: center;}

？

我必须在这里遗漏一些东西...

或者，您可以将标签包装在

标签中并设置 text-align：将 放在

标记上。

编辑

进一步检查您的页面后，您似乎正在尝试将绝对定位的内容居中。这很难。确保您没有将标记声明为 display:block 并且可以将其居中，因为标记默认情况下内联。

编辑 2

经过进一步进一步审查，您所需要做的就是将您的 #help 规则设置为 left: 50% 并删除您的 <代码>正确规则。即使在绝对定位的情况下，这也会很好地居中:)

uh,

div {text-align: center;}

I have to be missing something here...

Alternatively, you could wrap your <a> tags in <p> tags and set text-align: center on the <p> tag.

EDIT

Upon further review of your page, it appears you're trying to center something that is absolutely positioned. This is difficult. Make sure you're not declaring your <a> tag as display:block and you can center it because <a> tags are inline by default.

EDIT 2

Upon further FURTHER review, all you need to do is set your #help rule to left: 50% and get rid of your right rule. That will center it just fine even while absolutely positioned :)

回复收藏 0 原文

~没有更多了~