jquery - 如何更准确地对齐此 jQuery UI 按钮(跨浏览器)？

Question

在此页面上:http://friendsconnect.org/mainbar.php我正在尝试将按钮与图片到浏览器两侧的间距相等。

我在 Chrome 上可以做得很好，但其他浏览器(该死的 IE)显示效果稍差。当然，如果我在一个浏览器中进行更改，它会影响其他浏览器。

下面是更具体的代码:

<div style="text-align: right; width: 100%; padding: 0px 0px 0px 0px;">
    <table style="height: 35px; float: right;"><tr><td style="vertical-align: middle;">
        <div style="text-align: right;"><strong><?php print($user_full_name); ?> (<?php print($user_username); ?>)<br/></strong></div>
        </td><td style="vertical-align: middle;">
        <div style="text-align: right; padding: 0px 5px 0px 5px;float: right;"><img style="float: right; width: 25px; height: 25px" src="<?php print($user_current_propic); ?>&h=25&w=25&zc=1"></div>
        </td><td style="text-align: middle"><div style="margin-top: 1px;"><button id="options">Settings</button><button id="select">Settings</button></div></td></tr></table>
    </div>

当然还有一 block 馅饼:http://pastie.org/private/fpnhyc94ekeezdscko5ihw .

Answer 1

具体回答您的问题:

CSS:

/* Get the whole thing on the right side. */
.mainbar {
    float: right;
}
/* Each direct child element should be block, so that <img>s don't have a
space below them, and things like <span> elements act consistently, etc. The
line-height will vertically align text. Floating acts similar in most
modern browsers. */
.mainbar > * {
    display: block;
    float: left;
    margin: 5px 10px 5px 0;
    line-height: 25px;
}
/* I did not re-create your button, but it should be CSS-based. */
.mainbar-button {
    height: 25px;
    width: 100px;
    border: 1px solid #333;
}

HTML:

<div class="mainbar">
    <span>Pete Allport (pcallport)</span>
    <img src="./FriendsConnect   My dashboard_files/create_user_image.php" />
    <div class="mainbar-button">Settings</div>
</div>

并且没有 jQuery 涉及布局的间距； jQuery 是一个 JavaScript 包装器，并且始终位于 <script></script> 之间。

如果您对最佳实践感兴趣

• 表格用于表格数据，即使如此，dt、dl 和 dd 标签也更具语义性。您应该开始了解CSS layouts .

• 应尽可能避免内联 CSS，尝试使用更多的 class 和 id 属性。

• <script></script> 应放置在页面的最底部，以便在 DOM 结构为用户进行可视化编译之后才会加载(感觉上加载时间更快)。

• 请注意我的示例中的所有简写，例如颜色和边距的 3 位十六进制代码:东北西南值等。

我建议一些工具，以防万一您还没有

• Chrome:使用内置检查器，太棒了!
• 火狐:Firebug
• IE(上帝保佑):Firebug lite

祝你编码愉快!