Question

这个问题让我疯狂。我很少有机会错过一些东西，但经过半天的面部护理，我显然需要有人找到并解释这个问题，或者纠正我的错误。

我在jsFiddle中创建了一个小问题示例，但如果您使用Chrome，它可能只能重现。无论如何我会试着解释一下：

我的字段集在一个部分内正确对齐，或者添加一些300px左边距的样式。但是我已经检查了输出的代码和计算出的样式，没有任何事情对我来说很奇怪。 最奇怪的是，如果我在“section”中添加边框（border：1px solid＃000），则fieldset会突然正确对齐。

HTML：

<body>
<div class="page">
    <header>
        <div id="title">
             <h1>The System</h1>
        </div>
        <div id="logindisplay">
            Welcome <strong><a href="#" id="userdetails">Username</a></strong>! [ <a href="/Account/LogOff">Log Off</a> ]
        </div>
        <nav>
            <ul id="menu">
                <li><a href="/">Home</a>
                </li>
                <li><a href="/Patient">Patients</a>
                </li>
                <li><a href="/Report">Reports</a>
                </li>
                <li><a href="/Home/Printouts">Printouts</a>
                </li>
                <li><a href="/Home/Contact">Contact</a>
                </li>
                <li><a href="/Account/AdminIndex">Admin</a>
                </li>
                <li><a href="/Account/SysAdminIndex">SysAdmin</a>
                </li>
            </ul>
        </nav>
    </header>
    <section id="main">
            <fieldset class="headline">
                <legend class="headline">Patients</legend>
                    <p>Why is this aligned right?</p>
                    <input id="button-add-patient" type="button" value="Add a new patient" />
            </fieldset>
    </section>
    <footer>Blahblah</footer>
</div>
</body>

CSS：

body {
    background-color: #5c87b2;
    font-size: 68%;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    min-width: 600px;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}
header, footer, nav, section {
    display: block;
}
/* HEADINGS
----------------------------------------------------------*/

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/

 .page {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1270px;
    min-width: 600px;
    display: block;
    position: relative;
}
header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}
header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 30px !important;
    text-shadow: 1px 1px 2px #111;
}
#main {
    padding: 10px 10px 5px 10px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    text-align: left;
}
footer, #footer {
    background-color: #fff;
    color: #CCC;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}
/* TAB MENU
----------------------------------------------------------*/
 ul#menu {
    padding: 0 0 4px;
    position: relative;
    margin: 0;
    text-align: right;
}
ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li a {
    padding: 7px 10px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2em;
    background-color: #ececec;
    color: #45709a;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
    border: none;
}
ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}
ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}
/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/
 fieldset {
    border: 1px solid #ddd;
    padding: 1em 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}
legend {
    font-size: 1.2em;
    font-weight: bold;
}
fieldset.headline {
    border: 1px solid #ddd;
    padding: 1em 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}
legend.headline {
    font-size: 1.5em;
    font-weight: bold;
}

/* TABLE
----------------------------------------------------------*/
table {
    border: solid 1px #aaaaaa;
    border-collapse: collapse;
    font-size: 1em;
}
table td {
    padding: 5px;
    border: solid 1px #aaaaaa;
}
table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e6e6e6;
    border: solid 1px #aaaaaa;
}

/* MISC
----------------------------------------------------------*/

nav, #menucontainer {
    margin-top: 20px;
}
div#title {
    display: block;
    float: left;
    text-align: left;
}
#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px 0 5px 10px;
    color: White;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

奇怪的修复（替换现有的主要部分）：

<section id="main" style="border:1px solid #000">

由于我在SO或Google上找不到关于这个问题的任何内容，我准备假设我在CSS / Html中犯了一个错误。但是，IE似乎再次表现好......

编辑：

使用适用于Windows的Chrome（版本32.0.1700.107 m）在我的输出上添加screendump：

Screendump from jsFiddle

Answer 1

这是因为您的#title元素浮动到左侧 - 因此浮动 out header元素。

将光标移动到DOM检查器中的#title元素上，您可以从页面中突出显示它到达该部分的白色背景。

如果您从padding-bottom中的h1删除了#title，那么它就适合。

或者将overflow:hidden添加到您的header元素中，以便它包含浮点数。（这会使标题在视觉上向上移动。）

（当然还有其他方法可以解决这个问题，这取决于你想要什么。）

Answer 2

尝试将此添加到fieldset.headline：

min-width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

此处已更新fiddle。

上次Chrome变得比IE差：）

Chrome中的字段集奇数对齐/填充/边距问题

2 个答案: