[css] left top 影響寬度與高度變形 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

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

css

Zaku 2019-04-11 18:04:36 ‧ 1705 瀏覽

分享至

發現假設是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邦高手 2 級 ‧ 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邦新手 3 級 ‧ 2019-04-12 09:27:35 檢舉

抱歉我只是舉例而已，這個案例我沒實際試過，但是是類似的結構

ccutmis iT邦高手 2 級 ‧ 2019-04-12 09:39:13 檢舉

沒關係我也只是拿你的問題在預防老人痴呆症而已 :D

Zaku iT邦新手 3 級 ‧ 2019-04-12 13:35:59 檢舉

囧??

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

2 個回答

0

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-04-12 11:15:27

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

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

Zaku iT邦新手 3 級 ‧ 2019-04-12 13:36:43 檢舉

檢測不出來囧

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-04-12 15:19:32 檢舉

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

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

星空君說的是這個嗎?

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-04-14 15:40:31 檢舉

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

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

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

登入發表回應

4

CSScoke

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

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

回應 1
分享
檢舉

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

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22088 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙