iT邦幫忙

0

[css] left top 影響寬度與高度變形

css

發現假設是position: absolute;的元素,如果設置top或left,當設為百分比%或特定px樹時,寬度或高度會變形。

例如:

.a{
 position: relative;
 widht:200px;
 height:100px;
 &::before {
      content: "";
      top: 50%;
      width: 5px;
      height: 1px;
      background: #ffffff;
      position: absolute;
    }
}

當我設top為50%的時候 &::before的height: 1px;正常,51%會變形,高度可能看起來像2px,52%正常,53%變形...,以此類推。

當for出多個元素時情況就更複雜,請問大概是什麼情況,目前chrome瀏覽器為主。

看更多先前的討論...收起先前的討論...
舜~ iT邦好手 1 級 ‧ 2019-04-12 08:35:40 檢舉
position: absolute ?? relative ??
ccutmis iT邦高手 8 級 ‧ 2019-04-12 09:24:23 檢舉
widht:200px (X) width:200px (O)
試了一下沒有發現你說的問題...
<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{background:#333;}
.myClass{position: relative;width:200px;height:100px;background:#999;float:left;border:solid 1px #666;}
.myClass::before {content: "";top: 50%;width: 5px;height: 1px;background: #fff;position: absolute;}
.myClassFix{background: #aaa;}
.myClassFix::before {top: 59%;background: #ff0;}
</style></head>
<body>
<div class="myClass"></div><div class="myClass"></div>
<div class="myClass myClassFix"></div><div class="myClass myClassFix">
</body></html>
Zaku iT邦新手 4 級 ‧ 2019-04-12 09:27:35 檢舉
抱歉我只是舉例而已,這個案例我沒實際試過,但是是類似的結構
ccutmis iT邦高手 8 級 ‧ 2019-04-12 09:39:13 檢舉
沒關係 我也只是拿你的問題在預防老人痴呆症而已 :D
Zaku iT邦新手 4 級 ‧ 2019-04-12 13:35:59 檢舉
囧??

2 個回答

0
浩瀚星空
iT邦超人 1 級 ‧ 2019-04-12 11:15:27

一般要善用一下f12大法。檢查其css的規則因素。了解一下其style中,是否有被影響取代掉的東西

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2019-04-12 13:36:43 檢舉

檢測不出來囧

如果說連f12大法也不知道怎麼看的話,你未來的走向會很危險的。

ccutmis iT邦高手 8 級 ‧ 2019-04-12 17:45:06 檢舉

https://ithelp.ithome.com.tw/upload/images/20190412/20028574HVpYjJiuYc.png
星空君說的是這個嗎?

是的,從這邊可以了解css的相關配置問題。

Zaku iT邦新手 4 級 ‧ 2019-04-15 09:31:30 檢舉

我的意思是你從這上面看數值是對的

4
CSScoke
iT邦新手 4 級 ‧ 2019-04-13 00:53:38

看來是瀏覽器本身渲染問題喔
建議讓父層高度盡量在偶數而不要在奇數,這樣可以避免瀏覽器渲染時出現半顆像素的狀況而導致渲染出錯
試試看吧

Zaku iT邦新手 4 級 ‧ 2019-04-15 09:32:55 檢舉

恩,我也在想,但不太好抓,所以寬度也會有同樣的問題?

我要發表回答

立即登入回答