當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

华为自带浏览器绕坑大法！

發(fā)布時間：2025/4/16 HTML 51 豆豆

生活随笔收集整理的這篇文章主要介紹了华为自带浏览器绕坑大法！小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

本人前端菜鳥，最近在做移動端網頁的時候，使用的是彈性盒布局，在其他瀏覽器上面都沒有問題，但是就是在華為自帶瀏覽器上彈性盒布局不管用，已經試過在前面加webkit，moz，ms前綴，結果都不行

不過現(xiàn)在解決了，希望可以幫到大家下邊是?我做的兼容code:
<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="utf-8">
????<title>學習項目</title>
????<style?type="text/css">
????????.bangdan_top_filter?{
?????????????width:?100%;
?????????????height:?54px;
?????????????line-height:?54px;
?????????????background-color:?#fff;
?????????????z-index:?8500;
?????????????position:?fixed;
?????????????display:?-webkit-box;
?????????????display:?-moz-box;
?????????????display:?-ms-flexbox;
?????????????display:?-webkit-flex;
?????????????display:?flex;
?????????????-webkit-box-pack:?justify;
?????????????-moz-justify-content:?space-between;
?????????????-webkit-justify-content:?space-between;
?????????????justify-content:?space-between;
?????????????-webkit-box-align:?center;
?????????????-moz-align-items:?center;
?????????????-webkit-align-items:?center;
?????????????align-items:?center;
?????????????-webkit-box-direction:?normal;
?????????????-webkit-box-orient:?horizontal;
?????????????-moz-flex-direction:?row;
?????????????-webkit-flex-direction:?row;
?????????????flex-direction:?row;
????????????}

????????.bangdan_top_filter?.left_aside,?.bangdan_top_filter?.right_aside?{
?????????????padding:?0?18px;
?????????????font-size:?16px;
?????????????color:?#333;
????????}

????????.bangdan_top_filter?.fee_check_con?{
????????????display:?-webkit-box;
????????????display:?-moz-box;
????????????display:?-ms-flexbox;
????????????display:?-webkit-flex;
????????????display:?flex;
????????????-webkit-box-pack:?justify;
????????????-moz-justify-content:?space-between;
????????????-webkit-justify-content:?space-between;
????????????justify-content:?space-between;
????????????-webkit-box-flex:?0;
????????????-moz-flex-grow:?0;
????????????-webkit-flex-grow:?0;
????????????flex-grow:?0;
????????????margin:?0?auto;
????????????text-align:?center;
????????????line-height:?55px;
????????}
????????.bangdan_top_filter?.fee_check?{
????????????display:?none;
????????????width:?144px;
????????????height:?29px;
????????????line-height:?29px;
????????????border-radius:?16px;
????????????border:?1px?solid?#eb6262;
????????????position:?relative;
????????????color:?#eb6262;
????????}

????????.bangdan_top_filter?.fee_check_con?span?{
????????????width:?75px;
????????????height:?29px;
????????????line-height:?29px;
????????????display:?block;
????????????font-size:?16px;
????????????border:?1px?solid?transparent;
????????????border-radius:?16px;
????????????position:?absolute;
????????????top:?-1px;
????????}

????????.bangdan_top_filter?.check?{
????????????background-color:?#eb6262;
????????????color:?#fff;
????????}
????????.bangdan_top_filter?.pay?{
????????????left:?-2px;
????????}
????????.bangdan_top_filter?.free?{
????????????right:?-2px;
????????}

????</style>
??</head>
??<body>
????

????<div?id="bangdanTopFilter"?class="bangdan_top_filter">
????????<div?class="left_aside"?id="sort">分類</div>
????????<div?class="fee_check_con">
????????????<div?class="fee_check"?style="display:?block;">
????????????????<span?class="pay?check">付費</span>
????????????????<span?class="free?no_check">免費</span>
????????????</div>
????????</div>
????????<div?class="right_aside"?id="sortType">篩選</div>
????</div>

??</body>
</html>

除了以上這個問題，華為自帶瀏覽器還不支持fixed，border小于1px，時間戳轉日期的格式等等等等，所以想要完全兼容各瀏覽器的同學，必須要解決華為的坑

總結

以上是生活随笔為你收集整理的华为自带浏览器绕坑大法！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。