Vertical align checkbox / label pairs [duplicate]_问答_开发者

Vertical align checkbox / label pairs [duplicate]

开发者 https://www.devze.com 2023-02-06 16:30 出处：网络

This question already has answers here: How to align checkboxes and their labels consistently cross-browsers

This question already has answers here: How to align checkboxes and their labels consistently cross-browsers (40 answers) Closed 9 years ago.

I go through the posts on this issue on Stack Overflow, but nothing really works for me. I have the following CSS code to vertically align checkbox / label pair:

body {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
}

fieldset {
    line-height: 100%;
}

label {
    display: inline-block;
    vertical-align: baseline;
}

The full HTML code is here.

Checkbox / label pai开发者_如何学Pythonrs are vertically centered correctly in Safari (5.0.3) and Firefox (3.6.13) under Mac OS X. On Chrome (Mac OS X) checkboxes are rendered slightly to the top. On Windows OS checkboxes and associate labels are aligned to the bottom (consistently across different browsers: Firefox, Safari, Chrome, and Internet Explorer 8).

Could somebody please explain me why this differences between browsers / OS happens (and also how to avoid them)?

Update

The hack to vertically align checkbox with label in Chrome under Mac is as follows:

input[type=checkbox] {
    position: relative;
    top: 1px;
}

Now need to implement OS and browser specific conditionals...

another solution:

.checkbox{
vertical-align:-3px;
}

note: it's simple. But not always works fine if the font-size of label is too big.

Maybe the default margins/padding on the <input> are messing things up?

This is how I finally did it:

label input[type=checkbox] {
    margin-top: 5px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="../images/favicon.ico" />
<style>
.GlobalEntityComboBox {
    font-family: Verdana;
    font-size: 11px;
    padding: 0px;
    margin: 0px;
    background-color: lightgrey;
    border: 1px solid grey;
    width: 190px;
}
.GlobalEntityComboBox li {
    list-style-type: none;
    line-height: 24px;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.GlobalEntityComboBox li.checked {
    background-color: lightgreen;
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}
.GlobalEntityComboBox input {
    margin: 0px;
    padding: 0px;
    margin-right: 4px;
    vertical-align: middle;
}
.GlobalEntityComboBox span {
    vertical-align: middle;
}
</style>
</head>
<body>
<ul class="GlobalEntityComboBox">
    <li class="checked"><input type="checkbox" checked/><span>All Servers</span></li>
    <li class="checked"><input type="checkbox" checked/><span>Server 1</span></li>
    <li class="checked"><input type="checkbox" checked/><span>Server 2</span></li>
    <li><input type="checkbox"/><span>Server 3</span></li>
</ul>
</body>
</html>

.flcheck-wrapper
{ overflow:hidden;
  margin:5px 0;
}

.flcheck-wrapper p
{ font-size:12px;
  display:inline;
  float:left;
  line-height:20px;
  margin:0 0 0 10px;
}

.flcheck-wrapper input[type="checkbox"],
.flcheck-wrapper input[type="radio"]
{ display:inline;
  float:left;
  margin:0 !imortant;
  line-height:20px;
  height:20px;
}

<div class="flcheck-wrapper">    
    <input type="radio" name="foo" value="true" checked="checked" />
    <p>Some kind of text</p>
</div>
<div class="flcheck-wrapper">    
    <input type="radio" name="foo" value="false" />
    <p>Some kind of text</p>
</div>

No idea why the browsers do different things, they just always do. As far as this, did you try display:table-cell;?