Maison > interface Web > tutoriel HTML > css实践中遇到的问题_html/css_WEB-ITnose

css实践中遇到的问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:21:24
original
1018 Les gens l'ont consulté

webkit浏览器中缩放低于100%浮动布局错乱?

如:1200宽度:内容宽度(400-20-2)*3个+内边距宽度0+边框宽度1px*2边+外边距宽度10px*2边

<div class="div1">	<div class="div2">		<li class="li"></li>		<li class="li"></li>		<li class="li3"></li>	</div></div>
Copier après la connexion

.div2 {    width: 1200px;    border: 1px solid #ddd;}.li {    float: left;    width: 378px;    height: 40px;    line-height: 40px;    margin: 10px;    border: 1px solid #ddd;}.li3 {    float: right;    width: 31%;    height: 40px;    line-height: 40px;    margin: 10px;    border: 1px solid #ddd;}
Copier après la connexion

 

 问题所在:在-webket内核中出现的情况,在ie中并没有这种情况,由于边框的宽度在缩放中都是1px,低于100%进行缩小的时候第三个float会被挤到下一层

解决办法:如以上代码,给第三个框设置百分比,百分比可以这样取值378/1200=31.5% 经测试取值31%才可以!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal