2 i mili i_mili 于 2016.05.10 15:13 提问

Chrome width显示问题

代码中定义了input width: 100px, 为什么chrome看到的是88px, 如图图片说明

6个回答

CSDNXIAOD
CSDNXIAOD   2016.05.10 15:23

Chrome 浏览器字体不显示问题
解决Firefox和Chrome上福州大学教务处下拉菜单无法显示问题
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

KatherineZuo
KatherineZuo   2016.05.10 15:51

加上左右边框以及左右内边距正好是100px

i_mili
i_mili 但是为什么百度首页的input框定义的width是500px, 盒子模型看到的就是500px, 请看我评论的截图
一年多之前 回复
u012377333
u012377333   Rxr 2016.05.10 16:31

1 + 5 + 5 + 1 + 88 = 100

i_mili
i_mili 回复一枪尽骚丶魂: 而且这个问题在IE下和chrome是不一样的, IE9显示的就是width的值,chrome比这个值小, 我加了box-sizing: border-box 然后就好了
一年多之前 回复
u012377333
u012377333 回复i_mili: 。。。。。。。。。。。。。。。。自己再琢磨琢磨吧。。。。。。。。。。。。。。。
一年多之前 回复
i_mili
i_mili 回复一枪尽骚丶魂: 我直接在盒子模型里面改border padding margin的值, width依然是500px, 不会减小
一年多之前 回复
i_mili
i_mili 回复一枪尽骚丶魂: 既然padding-left: 7px, 那为什么width不是493px?
一年多之前 回复
u012377333
u012377333 回复i_mili: 你自己可以设置magin、border、padding三个属性看一下效果。
一年多之前 回复
u012377333
u012377333 回复i_mili: margin:简写属性在一个声明中设置所有外边距属性;6px 0 0 7px;上面6px,右边0px,下面0px,左边7px; border 简写属性在一个声明设置所有的边框属性。 padding 简写属性在一个声明中设置所有内边距属性。
一年多之前 回复
i_mili
i_mili 回复一枪尽骚丶魂: 看截图,实际input的margin是不为0的
一年多之前 回复
i_mili
i_mili 回复一枪尽骚丶魂: margin是不为0的,margin: 6px 0 0 7px; padding确实是0 我如果直接在盒子模型上改padding: 10px width仍然显示500px 并不像我问的问题截图中的那样
一年多之前 回复
u012377333
u012377333 回复i_mili: 看我截的图,设置的margin和padding设置都是0;
一年多之前 回复
u012377333
u012377333 回复i_mili: 因为他把margin和border都设为了0px;
一年多之前 回复
i_mili
i_mili 但是为什么百度首页的input框定义的width是500px, 盒子模型看到的就是500px, 请看我评论的截图
一年多之前 回复
i_mili
i_mili   2016.05.11 09:42

图片说明

u012377333
u012377333   Rxr 2016.05.11 15:12

图片说明

i_mili
i_mili   2016.05.11 15:16

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!