为什么div的高度会在图像和div之间产生差距？
这是我的html结构，简单
<div> <img style="width:100%;height:100%"/> </div>
div显示在chrome中：
和图像，div和图像之间存在间隙
注意到图像应该覆盖div，
如果我更改div的高度超过10px，看起来很完美。
图像覆盖div
我测试过div的高度是否较小，差距是否较大。
那么问题是什么？
有一个例子我从我的项目中复制了部分代码，需要指向chrome dev工具中的那个图像：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
._display_style{
display:none;
}
.sketchup_display_style
{
display:block;
}
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.cab_list_form #shape div img{
width:80%;height:80%;
}
/*
.cab_list_form #shape {
width:150px;height:200px;
}*/
.cab_list_form #shape div {
/*
width:160px;
height:160px;
float:left;
*/
padding:0.2em 0 0.6em;
text-align:center;
background-repeat:no-repeat;
cursor:pointer;
}
.cab_list_form #shape div span{
width:100%;
display:block;
}
.toggle-red{
border:2px solid red;
}
.cab_style_img{
background-color:#fff;
border:2px solid #ebebeb;
text-align:center;
}
.cab_style_img img{
width:290px;
height:240px;
}
.question_img{
padding-right:1em;
float:left;
}
#cab_condition table td label{
/*
background-repeat:no-repeat;
text-align:center;
padding:0.1em 0.8em 0.3em;
cursor:pointer;
width:50px;
height:100%;
line-height:20px;
margin:auto;
text-align:center;
*/
border-radius:20px;
text-align:center;
width:55px;
height:20px;
line-height:20px;
margin:auto;
background-color:#ffffff;
cursor:pointer;
padding:0 0.5em;
}
#cab_condition table td label input{
display:none;
}
#cab_condition table td label span{
margin:0.1em 0.6em;
}
.howmanypart_td span{
margin:0.1em 0.7em ;
}
.down_search div {
background-repeat:no-repeat;
cursor:pointer;
text-align:center;
height:30px;
line-height:30px;
color:#30b2ba;
/*
padding:0.5em 0;
width:50px;
*/
}
.priceDiv select{
border:1px solid #bdbdbd;
width:130px;
height:28px;
border-radius:20px;
/*text-align:center;*/
color:#30b2ba;
cursor:pointer;
}
.door-background{
position: absolute;
border:2px solid #000;
border-collapse:collapse;
text-align:center;
padding:0;
margin:0;
}
.door-background th, .door-background td {
border:2px solid #999; border-width:0 2px 2px 0;padding:0;
}
.tableizer-table{
border:1px solid #000;
border-collapse:collapse;
width:100%;
text-align:center;
}
.tableizer-table th, .tableizer-table td {
border:1px solid #999; border-width:0 1px 1px 0;padding:2px;
}
.wardrobe_type_list{
width:100%;
height:40px;
}
.wardrobe_type_list .groups_check{
float:left;
margin-right:25px;
height:25px;
line-height:25px;
}
.wardrobe_type_list .groups_check img{
height:100%;
}
.wardrobe_type_list .groups_check input[type=radio]{
height:25px;
line-height:25px;
}
.display-none{
display:none;
}
.search-container{
float:left;
}
body {
font-size:14px;
margin:15px;
}
.pax_layer {
position:absolute;
background-repeat:no-repeat;
}
.pax_highlight {
position:absolute;
border:solid 3px #329afb;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
z-index:3;
}
.pax_highlight_text {
color:#329afb;
font-weight:bold;
font-size:12px;
bottom:0px;
margin-bottom:-19px;
position:absolute;
text-align:center;
}
#groups_list {
left:10px;
position:relative;
}
#white_hide_menu {
background-color:white;
height:51px;
position:absolute;
top:517px;
width:5px;
display:none;
}
.menu_groups {
height:140px;
overflow:hidden;
position:relative;
width:100%;
}
.thumbs_layers_div_a {
display:none;
}
.items div {
float:left;
}
.items {
overflow-x:scroll;
overflow-y:hidden;
width:100%;
height:100%;
}
.thumbs_layers_group {
height:100px;
}
.thumbs_layers_div {
background-color:white;
cursor:pointer;
float:left;
margin-left:8px;
padding:1px;
width:93px;
height:93px;
text-align:center;
display:inline-block;
display:inline;
}
.thumbs_layers_div_selected {
border-color:#389CFC;
border-width:3px;
background-color:#389CFC;
}
.thumbs_layers_div img {
border-color:#D1D1D1;
border-style:solid;
border-width:1px;
height:91px;
}
.thumbs_layers_add_item{
width:100%;
text-align:center;
height:25px;
line-height:25px;
overflow:hidden;
}
.thumbs_layers_div_selected img {
border-color:#389CFC;
}
.pax {
height:180px;
}
#layers_pax_buffer {
pointer-events:none;
}
#layers_pax_buffer {
display:none;
border:1px solid #CCCCCC;
width:1048px;
height:585px;
position:absolute;
top:98px;
}
.val {
width:1048px;
height:150px;
}
#dialog-confirm,#dialog-confirm2 {
display:none;
}
.pax_h_dimension {
display:none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display:none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder:2px solid grey;
position: relative;
margin:10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder:1px solid green;
background:#f0f0f0;
overflow:hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width:800px;
margin: 0 auto;
height:auto;
}
.attr {
width:90%;
float:left;
}
.name {
width:90%;
text-align:left;
margin:10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height:18px;
border:1px solid #bbb;
float: left;
margin: 5px;
padding:5px;
text-align: center;
cursor: pointer;
}
#message{
width:140px;
height:80px;
border:3px solid #ddd;
margin:5px;
padding:10px;
float:left;
background:#eee;
}
#message div{
margin-bottom:10px;
}
.button{
width:150px;
height:40px;
padding:10px;
float:right;
xmargin-top:300px;
}
.button button{
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width:80px;
height:30px;
margin:5px;
font-size:14px;
xfloat:right;
}
.pax{
border:3px solid #eee;
height:auto;
margin:20px;
overflow:hidden;
min-width:800px;
xoverflow-y: hidden;
}
#items_scroll{
overflow-x: scroll;
padding:5px;
}
.thumbs_layers_div{
overflow:hidden;
height:120px;
}
.wardrobe_type_list{
xpadding-top:10px;
xpadding-left:10px;
xwidth:90%;
margin:10px;
margin-bottom:0;
}
#items{
}
.thumbs_layers_div_selected .thumbs_layers_add_item{
color:white;
}
.v #items img{
width:95px;
height:auto;
}
.v .thumbs_layers_div{
height:70px;
}<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;"><div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>%E5%B7%A6</div><div>宽度:968</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>copyRight</div><div>宽度:968</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>1</div><div>宽度:50</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>1</div><div>宽度:50</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>dingxian</div><div>宽度:2100</div><div>高度:65</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div></div>
2 个答案:
答案 0 :(得分：2)
答案 1 :(得分：0)
@ Zange-chan你不完全正确，一旦你将一个元素的位置设置为“绝对”，它将与DOM流分开，并且它仍然实际上包裹它的子元素。 问题很容易解决，一种解决方案是将display属性设置为img的块。 请试一试
Route::get('/add_email','ListsController@index_add_email');
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？