Fieldset奇怪的對齊/填充/保證金問題在Chrome中

這個問題讓我發瘋。有一個小小的機會，我只是錯過了一些東西，但經過半天的表情，我顯然需要有人找到並解釋這個問題，或糾正我的錯誤。Fieldset奇怪的對齊/填充/保證金問題在Chrome中

我已經建立了我的問題的一個小例子中jsFiddle，但如果你使用Chrome它可能只可再現。我會盡力解釋：

我的字段集正好在一個區域內對齊，或者添加了大約300px的左邊界樣式。但是我已經檢查了輸出的代碼並計算了樣式，沒有什麼東西跳出來對我來說很陌生。 最奇怪的是，如果我在「部分」（邊框：1px solid＃000）中添加邊框，字段集突然對齊。

的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瀏覽器似乎使它確定...

編輯：

添加我的輸出screendump，Chrome瀏覽器（版本32.0.1700.107米）的Windows：

Screendump from jsFiddle

來源

2014-02-13 Mackan

我在Mac OS X上看不到Chrome 32的問題。除非我誤解了這個問題:) –

啊，我會添加一個我的輸出的screendump – Mackan

在Mac OS X上絕對不會看到問題，但在同一臺機器上的Parallels中啓動Win8會在同一個Chrome版本中顯示問題。 –

這是因爲你的#title元素漂浮在左邊 - 因此浮出元素的列出了。

將光標移動到DOM檢查器中的#title元素上，並從頁面中的突出顯示中看到它到達該節的白色背景。

如果您從#title內的h1中刪除padding-bottom，那麼它很合適。

或者將overflow:hidden添加到您的header元素中，以便它包含浮點數。（這會讓標題視覺上雖然拉昇。）

（有固定的這個問題，以及課程等方式，這取決於你想要什麼。）

來源

2014-02-13 22:14:23 CBroe

好的。嘗試溢出：隱藏，它似乎已經解決了這個問題。任何想法爲什麼#title元素漂浮在標題之外？我的意思是，我會得到一個負面的保證金，但是不應該在標題中包含標題，因爲它現在已經被識別了嗎？ – Mackan

我猜float和2em行高的組合並不是最大的。我現在以像素爲單位設置行高，但溢出保護將不得不保留以防萬一:-) – Mackan

浮動元素通常不會影響其父級的高度 - 除非滿足特殊條件，如父級浮動本身或將「overflow」設置爲默認的「visible」以外的內容。 – CBroe

帶有附加嘗試fieldset.headline ：

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

這裏更新fiddle。

在上次Chrome變得比IE更糟:)

來源

2014-02-13 22:23:34 urosevic

Fieldset奇怪的對齊/填充/保證金問題在Chrome中

回答

相關問題