正文从这里开始了

—————–我是华丽丽的分割线 开始—————–

问题再现：
IE8：

IE9：

IE10-IE11：



FireFox：



chorme：



css:

可以看出：
1、IE8、IE9下，由于不支持placeholder，因此不存在placeholder文本位置居中与否的问题，但是填写的文字居中了；
2、在IE10-IE11下表单里面的placeholder，placeholder文本位置并未垂直居中，但是填写的文字却垂直居中了；
3、chrome与FireFox下，placeholder文本位置垂直居中并且填写的文字同样也垂直居中了。

整理问题：
IE8-IE11，FireFox以及chrome下，表单文本居中了。但是在IE10-IE11下，placeholder文本并未垂直居中。
那么现在整理出问题，IE10-IE11下，placeholder文本并未垂直居中。
难道placeholder文本和表单用户输入的文本计算方式是不一样的？从现象上看，这确实不一样
从css上看，会造成影响的属性分布有box-sizing，border，padding，height，line-height
当box-sizing设置为border-box时，line-height = height - border-top-width - border-bottom - padding-top - padding-bottom这样既可把文本居中了。
当box-sizing设置为content-box时，line-height = height这样既可把文本居中了。

因此上述的问题既可解决。
IE10-IE11

同样的
chrome

FireFox

因此
1、可以选择去掉padding垂直方向上的设置；
2、通过计算line-height = height - border-top-width - border-bottom - padding-top - padding-bottom；
3、改变盒模型；
至此，问题就算解决了。

但是在研究过程中发现一些奇怪的现象以及学习到的东西
1、在chrome下，开启shadow DOM情况下

浏览器渲染情况：


发现填写了placeholder属性的input元素是有两个shadow元素组成的，而没有placeholder属性的input元素只有#inner-editor元素。

#inner-editor元素是不继承父级的高度的，自身高度是靠line-height撑开的。

小编突发奇想，如果不设置line-height会怎样？
经测试发现IE，chrome，FireFox都会自动设置为line-height:normal;

查找相关资料发现，line-height：normal是按照font-size进行计算的，一般按照1.14倍进行计算。

2、

去掉标记2中的box-sizing：border-box；
渲染出来的是这样的：

input获得焦点的时候：

这是因为IE浏览器与谷歌浏览器的渲染不一致导致的；
我们可以对比：
IE：

chrome：

focus态的时候，IE的处理是placeholder文字直接消失，而谷歌却还在；
谷歌是当文字输入的时候才消失；

这是由于两个浏览器内部处理不一致导致的问题。

3、

这一次，把1,2都去掉box-sizing：border-box；

然后把1的box-sizing：border-box；恢复

经过测量发现
placeholder文字的位置没有变动。
这是因为写了line-height以后，文字一直停留在line-height设置的那个地方。
4、

通过框1和框2对比发现，框1文字居中了，但是框2的文字却没有居中
那是因为框1是经过了常态->获得焦点->失去焦点(常态)
这个原因一直很费解。暂时由于知识厚度，经验丰富度等原因还找不出很好的解释去解释这种现象。

—————–我是华丽丽的分割线 结束—————–