比较来自世界各地的卖家的域名和 IT 服务价格

有一个神秘的较低室内装饰

我正试图在表格的某些元素上做出相当准确的风格,这个问题导致我很悲伤。

如果我试图删除
padding

,
margin

,
border


outline


<input/>

/从
display: block

/ 因此,字段大小仅定义专门,输入字段最终将具有多个额外的填充像素,而不是以相同方式体格化的任何其他块级元素。 这是一个例子:
http://jsfiddle.net/nottrobin/b9zfa/
/


<input class="normalised testSubject" value="hello">
<div class="normalised testSubject">hello</div>


可视化:


在这个例子中
<div>

获得计算的高度
16px

, 和
<input/>

- 计算高度
19px

.

我得到了同样的行为 Chrome 16, Firefox 9 和 Opera 11, 所以这是一个明显独立的渲染引擎。

我可以解决这个问题,手动添加高度,但我不想这样做,因为我希望设计留下来
http://www.alistapart.com/arti ... sign/
.

任何人都可以帮助我理解这里发生了什么,我如何可靠地确保这一点
<input/>

与块水平的任何元素相同,其高度相同吗?
</div>
<div class="answer_text">

<input/>

有一个最小
line-height

取决于字体的大小。 安装两个元素以便更重要
line-height

作品,以及完全删除
line-height

. 但它仍然不允许您具有比最小值更小的高度。 对此的校正是使用伪元素
first-line

并安装它
display: inline-block;

.

演示:
http://jsfiddle.net/ThinkingStiff/B7cmQ/
/


CSS:


.normalised:first-line {
display: inline-block;
}


但它没有解释原因
<input/>

除外
<div>

. 甚至
-webkit-appearance: none;

没有修复它。 似乎,在入口处有某种看不见的巫毒,这将其内容视为
inline

. 元素
inline

尺寸最小
line-height

根据字体的大小,我们在这里看到。 这就是为什么
first-line

修理它。 看起来像他造型师元素 "child" 元素
<input/>

.

这是一个显示最小值的演示
line-height


inline

元素。 元素
<div>

chtit。
line-height: 7px;

.
<span>

, 虽然它的计算值显示
7px;

, 在视觉上没有遵循它。

演示:
http://jsfiddle.net/ThinkingStiff/zhReb/
/

出口:


HTML:


<div id="container">
<div id="div-large">div <br/>large</div>
</div>
<div id="container">
<div id="div-medium">div <br/>med</div>
</div>
<div id="container">
<div id="div-small">div <br/>small</div>
</div>
<div id="container">
<span id="span-large">span <br/>large</span>
</div>
<div id="container">
<span id="span-medium">span <br/>med</span>
</div>
<div id="container">
<span id="span-small">span <br/>small</span>
</div>


CSS:


#container { 
background-color: lightblue;
display: inline-block;
height: 200px;
vertical-align: top;
}

#div-large {
line-height: 50px;
}

#div-medium {
line-height: 20px;
}

#div-small {
line-height: 7px;
}

#span-large {
line-height: 50px;
vertical-align: top;
}

#span-medium {
line-height: 20px;
vertical-align: top;
}

#span-small {
line-height: 7px;
vertical-align: top;
}


</span></div>
<div class="answer_text">
移动
line-height

, 显然,解决了这个问题。

http://jsfiddle.net/mreq/b9zfa/5/
. 只验证 FF 这个。
</div>
<div class="answer_text">
你确定他们使用完全相同的字体吗? /包括大小/?

尝试添加
box-sizing: border-box


input

.

我从未有这个问题,但我只用它在某处的测试中 IE9...
</div>
<div class="answer_text">
我知道我迟到了几个月的问题,但我在搜索中遇到了他 Google 我想添加一件事,可以帮助澄清一些关于元素的其他答案
<input/>

在 Firefox.

默认表单样式 Firefox 包括一些不舒服 CSS:


input {
...
line-height: normal !important;
...
}


这使得重新定义该物业几乎是不可能的。
line-height

任何输入形式 Firefox. 这个问题已经多年了,虽然是开发人员 FF 很容易删除
!important

从规则中,我相信一些实施问题与之相关。 under-the-hood. 此外,它似乎有一些网站 /包括 YouTube/, 哪个

偏僻的

论这条规则的行为。

有关更多信息和详细讨论,请参阅
https://bugzilla.mozilla.org/s ... 49259
. 这个主题还有一个很好的帖子博客
http://www.456bereastreet.com/ ... elds/
还有一个 /年长/ Eric Meyer B.
http://meyerweb.com/eric/thoug ... rmal/
.
</div>
</div></div></input>
已邀请:

奔跑吧少年

赞同来自:

<input/>

有一个最小
line-height

取决于字体的大小。 安装两个元素以便更重要
line-height

作品,以及完全删除
line-height

. 但它仍然不允许您具有比最小值更小的高度。 对此的校正是使用伪元素
first-line

并安装它
display: inline-block;

.

演示:
http://jsfiddle.net/ThinkingStiff/B7cmQ/
/


CSS:


.normalised:first-line {
display: inline-block;
}


但它没有解释原因
<input/>

除外
<div>

. 甚至
-webkit-appearance: none;

没有修复它。 似乎,在入口处有某种看不见的巫毒,这将其内容视为
inline

. 元素
inline

尺寸最小
line-height

根据字体的大小,我们在这里看到。 这就是为什么
first-line

修理它。 看起来像他造型师元素 "child" 元素
<input/>

.

这是一个显示最小值的演示
line-height


inline

元素。 元素
<div>

chtit。
line-height: 7px;

.
<span>

, 虽然它的计算值显示
7px;

, 在视觉上没有遵循它。

演示:
http://jsfiddle.net/ThinkingStiff/zhReb/
/

出口:


HTML:


<div id="container">
<div id="div-large">div <br/>large</div>
</div>
<div id="container">
<div id="div-medium">div <br/>med</div>
</div>
<div id="container">
<div id="div-small">div <br/>small</div>
</div>
<div id="container">
<span id="span-large">span <br/>large</span>
</div>
<div id="container">
<span id="span-medium">span <br/>med</span>
</div>
<div id="container">
<span id="span-small">span <br/>small</span>
</div>


CSS:


#container { 
background-color: lightblue;
display: inline-block;
height: 200px;
vertical-align: top;
}

#div-large {
line-height: 50px;
}

#div-medium {
line-height: 20px;
}

#div-small {
line-height: 7px;
}

#span-large {
line-height: 50px;
vertical-align: top;
}

#span-medium {
line-height: 20px;
vertical-align: top;
}

#span-small {
line-height: 7px;
vertical-align: top;
}


</span></div>
<div class="answer_text">
移动
line-height

, 显然,解决了这个问题。

http://jsfiddle.net/mreq/b9zfa/5/
. 只验证 FF 这个。
</div>
<div class="answer_text">
你确定他们使用完全相同的字体吗? /包括大小/?

尝试添加
box-sizing: border-box


input

.

我从未有这个问题,但我只用它在某处的测试中 IE9...
</div>
<div class="answer_text">
我知道我迟到了几个月的问题,但我在搜索中遇到了他 Google 我想添加一件事,可以帮助澄清一些关于元素的其他答案
<input/>

在 Firefox.

默认表单样式 Firefox 包括一些不舒服 CSS:


input {
...
line-height: normal !important;
...
}


这使得重新定义该物业几乎是不可能的。
line-height

任何输入形式 Firefox. 这个问题已经多年了,虽然是开发人员 FF 很容易删除
!important

从规则中,我相信一些实施问题与之相关。 under-the-hood. 此外,它似乎有一些网站 /包括 YouTube/, 哪个

偏僻的

论这条规则的行为。

有关更多信息和详细讨论,请参阅
https://bugzilla.mozilla.org/s ... 49259
. 这个主题还有一个很好的帖子博客
http://www.456bereastreet.com/ ... elds/
还有一个 /年长/ Eric Meyer B.
http://meyerweb.com/eric/thoug ... rmal/
.
</div>
</div>

知食

赞同来自:

移动
line-height

, 显然,解决了这个问题。

http://jsfiddle.net/mreq/b9zfa/5/
. 只验证 FF 这个。

涵秋

赞同来自:

你确定他们使用完全相同的字体吗? /包括大小/?

尝试添加
box-sizing: border-box


input

.

我从未有这个问题,但我只用它在某处的测试中 IE9...

小明明

赞同来自:

我知道我迟到了几个月的问题,但我在搜索中遇到了他 Google 我想添加一件事,可以帮助澄清一些关于元素的其他答案
<input/>

在 Firefox.

默认表单样式 Firefox 包括一些不舒服 CSS:


input {
...
line-height: normal !important;
...
}


这使得重新定义该物业几乎是不可能的。
line-height

任何输入形式 Firefox. 这个问题已经多年了,虽然是开发人员 FF 很容易删除
!important

从规则中,我相信一些实施问题与之相关。 under-the-hood. 此外,它似乎有一些网站 /包括 YouTube/, 哪个

偏僻的

论这条规则的行为。

有关更多信息和详细讨论,请参阅
https://bugzilla.mozilla.org/s ... 49259
. 这个主题还有一个很好的帖子博客
http://www.456bereastreet.com/ ... elds/
还有一个 /年长/ Eric Meyer B.
http://meyerweb.com/eric/thoug ... rmal/
.

要回复问题请先登录注册