HTML5和Bootstrap Select的选择高度不同 [英] Different height of select with HTML5 and Bootstrap Select
问题描述
我有一个使用Bootstrap Select的HTML select元素。如果我使用HTML5，则由Boostrap Select生成以呈现选择的按钮元素的正确高度为24。
I have a HTML select element that uses Bootstrap Select. If I use HTML5, the button element, that is generated by Boostrap Select to render the select, has a correct height of 24.
如果我不使用HTML5，则它的高度为24。然后在Blink（Opera 56.0）上的高度为8.875，在Gecko（Firefox 60.3，）上的高度为8.8833，导致显示损坏。
If I do not use HTML5, it then has a height of 8.875 on Blink (Opera 56.0) and of 8.8833 on Gecko (Firefox 60.3,) resulting in a broken display.
使用HTML5，我的意思是（或不是）DOCTYPE <！doctype html> 作为第一行（如我从FS上的文件测试的那样，没有服务器配置）。
By using HTML5, I mean having (or not) the DOCTYPE <!doctype html> as the first line (no server config as I tested from files on the FS).
对导致此行为的确切原因有任何想法吗？
Any idea of what precisely is causing this behaviour?
这是一个完整的副本（只需将其保存为文件，然后保留或删除第一行）：
Here is a complete repro (just save it as a file, and either keep or remove the first line):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="form-group row">
<label for="foobar" class="col-sm-2 col-form-label">Sauce</label>
<div class="col-sm-10">
<select class="form-control selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
</body>
</html>
推荐答案
如果未指定正确的文档类型，则浏览器切换到快速模式。对于较旧的站点，它是一种后备解决方案，其样式表是在以当前方式指定CSS之前编写的。 MDN提供了一个粗糙列表，它们在firefox中的布局存在差异，但是在浏览器之间存在细微的差别。
If you are not specifying a correct doctype, the browser switches to quirks mode. It is a fallback solution for older sites whose stylesheets were written before CSS was specified in the current way. MDN provides a "rough" list of differences in layouting in firefox, but there are subtle differences between browsers.
我没有找到引起您发现错误的特定规则，但它与百分比高度计算完全有关定位的孩子。如果从 .bootstrap-select .dropdown-toggle .filter-option 中删除 position：absolute ，则将计算高度正确（即使之后您必须调整小刀的位置）。
I didn't find a specific rule causing the bug you found, but it has something to do with the percentage height calculation with absolutely positioned children. If you remove position: absolute from .bootstrap-select .dropdown-toggle .filter-option, the height gets calculated correctly (even though you would have to adjust the placement of the carret afterwards).
这篇关于HTML5和Bootstrap Select的选择高度不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
