奇葩的狐火瀏覽器border屬性

2022-08-23 01:15:11 字數 924 閱讀 2721

今天接到乙個bug任務,客戶反映火狐瀏覽器訪問時某個商品樓層不顯示商品。我立即開啟我的火狐瀏覽器發現沒有復現這個bug,後來經過一番折騰,才發現火狐瀏覽器縮放到90%時,商品樓層果然就消失了,而且每台電腦都會復現,看來這就是css**問題了而不是介面資料問題,接下來我們就來分析這段歷史悠久的css**

這是火狐瀏覽器沒有縮放下的顯示效果,沒有問題,

我們來看下**

每行顯示5個商品,每個商品的寬度是193+1=194px(其中1px是border邊框的寬度),這樣一來,一行的寬度就是194x5=970px;正好能顯示下,在浮動布局下不會換行,因為父容器的width也設定的為970px.

接下來,當你縮放你的火狐瀏覽器為90%的時,我們再來看看**有什麼變化。

很奇怪,為什麼每個商品item的border的寬度變為1.11667px;超過了之前設定的1px,而且縮放的百分比越大,borde的寬度越大,這樣一來,每個商品的item的整體寬度就超過了194px,也就把父容器撐開了,跑到左邊的下邊了,被遮擋了。

後來我在谷歌瀏覽器也進了縮放,發現border的值變小了,這個是可以理解,變小了不會影響浮動布局。

解決方案:

1:為了相容性不用border屬性,用css樣式來實現乙個邊框。

2:給父容器多設定幾個px作為預留。

瀏覽器各種奇葩劫持,怎麼破?

瀏覽器各種奇葩劫持,怎麼破?各種奇葩的瀏覽器劫持,下面來總結下,分出以下幾步解決 step1 針對登錄檔劫持,可以自己寫個登錄檔來快速解決。新建乙個文字檔案。windows registry editor version 5.00 hkey current user software microso...

瀏覽器大戰中的搜狗瀏覽器

abc 智慧型狂拼 紫光華宇,其中簡體中文全拼和智慧型 abc智慧型對於語句的輸入支援有限,而智慧型狂拼和紫光華宇詞儘管可以根據本地詞頻來智慧型新增詞語但本身詞庫更新慢,使用搜狗輸入法的原因是它每次上網時都會自動更新一些流行的詞語,使我們輸入更方便了。其實對於瀏覽器,我很少在意的,也不經常換,我自己...

瀏覽器(二)瀏覽器是多程序的

browser程序 瀏覽器主程序,只有乙個,負責協調 主控。gpu程序 渲染程序 也就是我們常說的瀏覽器核心webkit等 第三方外掛程式程序 每種型別的外掛程式對應乙個程序,僅當使用該外掛程式時才建立 避免單個tab頁或第三方外掛程式奔潰從而影響整個瀏覽器 多程序充分利用多核優勢 方便使用沙盒模型...