Als ich kürzlich an einer H5-Seite arbeitete, entdeckte ich plötzlich ein Problem, als ich ein Bild mit einem Div umschloss. Bei der Vorschau auf dem Mobiltelefon stellte ich fest, dass eine Lücke zwischen dem Bild und dem Bild vorhanden war die div.
Die erste Reaktion war damals, ob der Abstand nicht auf 0 gesetzt sei, also habe ich eine Vorschau des Codes angezeigt:
.active img {
Breite:100 %;
Marge: 0;
}
<span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> 后来浏览了一些技术文档，发现了问题所在，原来是因为在H5文档声明下，块状元素内部的内联元素的行为表现所致，简单地说就好像块状元素内部有个看不见的没有宽度的空白节点。</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">而不设置vertical-align属性，vertical-align默认是baseline。</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">现解决方案有如下两种：</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">1.第一种最直接的解决方法是：</span><br><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">设置img的标签：vertical-align:bottom </span><br><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">修改后的的代码：</span>
<span style="font-family: 'Microsoft YaHei'; font-size: 14px;">.active img{</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> width:100%;</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> margin:0;</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> vertical-align:bottom;//top和bottom都可以</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">}</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">2.由于baseline是设置行内元素(inline)或者表格单元素(table-cell)的垂直对齐方式，所以可以将img转换成块级元素。</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">第二种方法：display：block，把父元素的font-size设为0</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">修改后的代码：</span>
<span style="font-family: 'Microsoft YaHei'; font-size: 14px;">.active img{</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> width:100%;</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> margin:0;</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"> display:block;</span><br><span style="font-family: 'Microsoft YaHei'; font-size: 14px;">}<br></span><em id="__mceDel"><br></em><span style="font-size: 14px; font-family: 'Microsoft YaHei';">.active{</span><br><span style="font-size: 14px; font-family: 'Microsoft YaHei';">font-size;0;</span><br><span style="font-size: 14px; font-family: 'Microsoft YaHei';">...</span><br><span style="font-size: 14px; font-family: 'Microsoft YaHei';">}</span>Zusammenfassung: Dies ist das erste Mal, dass ich einen Aufsatz schreibe, um alle Aspekte meiner Arbeitserfahrung festzuhalten. Da ich möglicherweise nicht gut schreiben kann, möchte ich um weitere Anleitung von Experten bitten.
