求大神来看为li元素设置相同的padding为何padding-bottom和padding-right为多出一部分_html/css_WEB-ITnose

代码如下

倍塔塞司

AI职业规划、AI职业测评、定制测评、AI工具等多样化职业类AI服务。

下载

回复讨论(解决方案)

哪里有问题

看了半天没看懂你问的是什么

哪里有问题

看了半天没看懂你问的是什么

这是 offsetHeight 的高度定义 和 li 的 box-sizing 是 content-box 相矛盾造成的

The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar
就是说 offsetHeight 包含了 内容, padding-top, padding-bottom, border-top, border-bottom, 以及涉及 scroollbar 的高度
box-sizing: content-box 指定元素的高度只包含内容, 而不含其他.
你的代码中, li 的高度之后被重设, 并且总是比期望的要多出 padding-top + padding-bottom 的和.
而之后,  padding-top 和 padding-bottom 并没有变化, 都是你指定的 10px, 这多出的部分被加到了 content 的高度上, 但content 的字体并没有变大, 而且文字又没有被处理成在 content 中垂直居中, 所以看起来上下空白就不一样了

所以可以加入以下 CSS, 在 scroollbar 不存在的情况下, 就可以解决了

li{    box-sizing: border-box;}

W3C 上 box-sizing 的定义引用

3.1. box-sizing property

Name: box-sizing
Value: content-box | border-box
Initial: content-box

content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

border-box
Length and percentages values for width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.

W3C 上 box-sizing 的定义引用

3.1. box-sizing property

Name: box-sizing
Value: content-box | border-box
Initial: content-box

content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

border-box
Length and percentages values for width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.

W3C 上 box-sizing 的定义引用

3.1. box-sizing property

Name: box-sizing
Value: content-box | border-box
Initial: content-box

content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

border-box
Length and percentages values for width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.

看了半天没看懂你问的是什么

//运动            var iheight=oli.offsetHeight;            alert(iheight);            oli.style.height="0";            move(oli,{height:iheight});

但是如果 出现了滚动条，页面就会变成这个样子

下面多余的部分不全是padding，还有一部分是li的高。
oli.offsetHeight获取的值是包括padding在内的，但是oli.style.height这样赋值的高是不包括padding的。
最简单的解决方法就是减掉padding，即var iheight=oli.offsetHeight-20;
但这样解决效果不太好，因为oli.style.height=“0”;时其实padding部分还是看的见的。
要效果好，也要简单就用jquery吧，修改如下

但是如果 出现了滚动条，页面就会变成这个样子

看了半天没看懂你问的是什么

//运动            var iheight=oli.offsetHeight;            alert(iheight);            oli.style.height="0";            move(oli,{height:iheight});

但是如果 出现了滚动条，页面就会变成这个样子

下面多余的部分不全是padding，还有一部分是li的高。
oli.offsetHeight获取的值是包括padding在内的，但是oli.style.height这样赋值的高是不包括padding的。
最简单的解决方法就是减掉padding，即var iheight=oli.offsetHeight-20;
但这样解决效果不太好，因为oli.style.height=“0”;时其实padding部分还是看的见的。
要效果好，也要简单就用jquery吧，修改如下

function getStyle(obj,attr){		if(obj.currentStyle)			return obj.currentStyle[attr];		else			return getComputedStyle(obj,false)[attr];	}