回復(fù)討論(解決方案)

哪里有問(wèn)題

看了半天沒(méi)看懂你問(wèn)的是什么

哪里有問(wèn)題

看了半天沒(méi)看懂你問(wèn)的是什么

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

The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar
就是說(shuō) offsetHeight 包含了 內(nèi)容, padding-top, padding-bottom, border-top, border-bottom, 以及涉及 scroollbar 的高度
box-sizing: content-box 指定元素的高度只包含內(nèi)容, 而不含其他.
你的代碼中, li 的高度之后被重設(shè), 并且總是比期望的要多出 padding-top + padding-bottom 的和.
而之后, padding-top 和 padding-bottom 并沒(méi)有變化, 都是你指定的 10px, 這多出的部分被加到了 content 的高度上, 但content 的字體并沒(méi)有變大, 而且文字又沒(méi)有被處理成在 content 中垂直居中, 所以看起來(lái)上下空白就不一樣了

所以可以加入以下 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.

看了半天沒(méi)看懂你問(wèn)的是什么

//運(yùn)動(dòng) var iheight=oli.offsetHeight; alert(iheight); oli.style.height="0"; move(oli,{height:iheight});

但是如果 出現(xiàn)了滾動(dòng)條，頁(yè)面就會(huì)變成這個(gè)樣子

下面多余的部分不全是padding，還有一部分是li的高。
oli.offsetHeight獲取的值是包括padding在內(nèi)的，但是oli.style.height這樣賦值的高是不包括padding的。
最簡(jiǎn)單的解決方法就是減掉padding，即var iheight=oli.offsetHeight-20;
但這樣解決效果不太好，因?yàn)閛li.style.height=“0”;時(shí)其實(shí)padding部分還是看的見(jiàn)的。
要效果好，也要簡(jiǎn)單就用jquery吧，修改如下

但是如果 出現(xiàn)了滾動(dòng)條，頁(yè)面就會(huì)變成這個(gè)樣子

下面多余的部分不全是padding，還有一部分是li的高。
oli.offsetHeight獲取的值是包括padding在內(nèi)的，但是oli.style.height這樣賦值的高是不包括padding的。
最簡(jiǎn)單的解決方法就是減掉padding，即var iheight=oli.offsetHeight-20;
但這樣解決效果不太好，因?yàn)閛li.style.height=“0”;時(shí)其實(shí)padding部分還是看的見(jiàn)的。
要效果好，也要簡(jiǎn)單就用jquery吧，修改如下

求大神來(lái)看為li元素設(shè)置相同的padding為何padding-bottom和padding-right為多出一部分_html/css

求大神來(lái)看為li元素設(shè)置相同的padding為何padding-bottom和padding-right為多出一部分_html/css_WEB-ITnose:代碼如下 無(wú)標(biāo)題文檔 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;} #div1{ margin:10px; width:300px; height:2

推薦度：

點(diǎn)擊下載本文 文檔為doc格式