Ответ 1
Не знаю, почему браузеры делают разные вещи, они всегда это делают. Насколько это возможно, вы попробовали display:table-cell;
?
Я просматриваю сообщения по этой проблеме в Stack Overflow, но ничего действительно не работает для меня. У меня есть следующий CSS-код для вертикального выравнивания пары checkbox/label:
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;
}
Полный HTML-код здесь.
Партии Checkbox/label вертикально центрированы в Safari (5.0.3) и Firefox (3.6.13) под Mac OS X. В Chrome (Mac OS X) флажки отображаются немного вверху. В ОС Windows OS флажки и ассоциированные метки выравниваются снизу (последовательно в разных браузерах: Firefox, Safari, Chrome и Internet Explorer 8).
Может кто-нибудь объяснить мне, почему это происходит между браузерами/ОС (а также как их избежать)?
Обновление
Флажок "Подлость для вертикального выравнивания" с меткой в Chrome под Mac выглядит следующим образом:
input[type=checkbox] {
position: relative;
top: 1px;
}
Теперь вам нужно реализовать условные условные обозначения ОС и браузера...
Не знаю, почему браузеры делают разные вещи, они всегда это делают. Насколько это возможно, вы попробовали display:table-cell;
?
другое решение:
.checkbox{
vertical-align:-3px;
}
Примечание: это просто. Но не всегда отлично работает, если размер шрифта слишком большой.
Может быть, по умолчанию поля/отступы на <input>
перепутаны?
Вот как я это сделал:
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>