相关疑难解决方法(0)
删除图像下方的空白区域
在Firefox中,只有我的视频缩略图在我的图像底部和边框之间显示神秘的2-3像素空白区域(见下文).
我已经尝试过在Firebug中我能想到的一切,但没有运气.
如何删除此空格？
推荐指数
解决办法
查看次数
HTML 5奇怪的img总是在底部添加3px的边距
当我将我的网站更改为
<!DOCTYPE HTML>
包含在DIV中的每个img元素都具有3px的底部边距,即使该边距未在CSS中定义.换句话说,没有导致3px底部边距的样式属性.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
现在让我们说haha.jpg是50x50,并且.placeholder设置为display:table.奇怪的是,我观察的.placeholder的高度尺寸是50x53 ......
有没有人遇到过这种异常并修复过它？
编辑
这是JS FIDDLE
推荐指数
解决办法
查看次数
如何摆脱div元素中svg下面的额外空间
以下是该问题的说明(在Firefox和Chrome中测试):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
注意蓝色下方的额外red空间.divsvg
已经尝试过设置padding和margin两个元素0,但没有运气.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
在图象标记下的奥秘白色空间
我刚刚更改了我网站上的标题图片
<div style="background-image... width=1980 height=350>
使用
<img src="... style="width:100%;">
所以图像会缩小它现在所做的...
但现在我有这个神秘的10px差距左右.
我已经检查了Chrome中的检查员,我只是看不出是什么造成了空间.我搜索了其他帖子,但找不到任何适用的内容.
有人知道吗？感谢任何帮助,鲍勃:)
推荐指数
解决办法
查看次数
font-size vs line-height vs实际高度
所以这个问题说明了font-size一个盒子的高度,所以所有的字母(上升和下降)都可以适合.
但为什么有span40px font-size和line-height45px的实际尺寸？如果我正确理解链接的问题,那么"X"应该小于40px,但总高度应该恰好是40px.我想也许它可以在上升/下降器的上方/下方增加一些空间,但是图像显示上升器/下降器占据了所有空间,因此不会有太多额外的空间:
当我围绕div(绿色)包裹时span,div其高度为40px.为什么div使用font-size它的孩子的高度,但孩子本身没有？:
现在,当我将span's 设置line-height为15px(小于font-size)时,则div高度变为26px.这个值是如何计算的？这与基线有关吗？:
当我将span's 设置line-height为65px(大于font-size)时,那么div高度就是高度line-height.我原div以为它的高度是(65px - 45px)+ 45px:
那么,如何才能font-size和line-height影响因素的实际高度？我读了一些引用该规范的问题,但我无法从中得到很多.有没有易于理解的规则？
推荐指数
解决办法
查看次数
div里面有错误的高度,里面有img标签
我有一个带有图像标签的div,div高度似乎比图像略大.
我可以通过设置div的特定高度(与图像相同)来解决这个问题,但我正在使用响应式布局,我不想为div设置特定的高度,所以当浏览器窗口缩放(例如在移动设备中)div将缩放并保持比率.
我需要div高度与图像高度完全一致.
这是场景:
<div class='box'><img src='image.jpg'></div>
Css是:
img {
height: auto;
max-width: 100%;
width: auto;
}
有人知道如何解决这个问题吗？
推荐指数
解决办法
查看次数
为什么这个容器比包含它所包含的图像所需的更高？
我想知道为什么图像的底部边框之间有垂直空间,并且在下面包含div:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns:fb="http://www.facebook.com/2008/fbml"><!--facebook-->
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.box {
border:1px solid black;
}
.image {
border:1px solid red;
}
</style>
</head>
<body>
<div class="box">
<img class="image" src="http://i.imgur.com/o2udo.jpg" />
</div>
</body>
</html>
推荐指数
解决办法
查看次数
链接图像上的额外填充(在每个浏览器中)
我在链接元素上添加了一个内部图像的填充问题.它发生在所有浏览器,Safari,Firefox,IE中.
我有一个重置样式表应用,所以在填充上不应该有任何额外的边距,但在检查时,很明显该a元素有一些额外的底部填充从无处.有任何想法吗？
这是标记和CSS:
<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>
div.home-col .movie {
padding: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}
div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}
div.home-col .movie img {
padding: 4px;
margin: 0;
border: 1px solid #d0d0d0;
}
推荐指数
解决办法
查看次数
如何使图像标题宽度与图像宽度相匹配？
我试图这样做:
<div class="figure">
<img src="/some/image.jpg">
<p class="caption">
<span class="caption-text">Some caption of any length</span>
</p>
</div>
因此,标题位于阴影框中,与图像的宽度相同.请注意,.figure有时可以在<td>表格内部,以防万一.它也不应超过父元素的宽度(在必要时缩小图像).
这是我到目前为止所拥有的:
.caption-text {
font-size: 14px;
font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
line-height: 0px;
}
.figure {
max-width: 100%;
display: inline-block;
position: relative;
}
.figure img {
vertical-align: top;
margin-bottom: 3px;
}
.caption {
display: block;
width: 100%;
position: absolute;
padding: 10px;
background-color: #e3e3e3;
box-sizing: border-box;
margin: 0;
}<div style="width:500px">
<h1>Some Title</h1>
<!--part I want to style--> …推荐指数
解决办法
查看次数