Rumah hujung hadapan web html tutorial 浏览器兼容性问题的实例分析

浏览器兼容性问题的实例分析

Jun 30, 2017 am 11:08 AM
flex pelayar

兼容性问题是前端的一个重要部分。

在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器。双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式。兼容模式时使用IE内核,极速模式采用webkit内核。而目前大部分网站为了性能和用户体验,默认使用极速模式。在极速模式出现问题时,使用兼容模式。

虽然极速模式是使用的webkit内核,但是浏览器的表现却还是有一定差异。平时使用Chrome调试,在极速模式下却表现的不正常。

好,进入正题。flex是目前前端布局中一个非常好的属性,这里不多说,可以看大神介绍

而在工作中发现了一个问题,flex和相对定位配合使用时:

1

2

3

4

5

6

7

<!DOCTYPE html>

<html lang="en">

<head><meta charset="UTF-8">

<title>Test</title><style>html,body{margin:0;padding:0;width: 100%;height: 100%;}

.wrapper{position: relative;width: 100%;height: 100%;background-color: #fff;display: flex;flex-direction: column;}

.flex-1{flex: 0 0 200px;background-color: #dfdfdf;}.flex-2{flex: 1;}.circle{position: relative;

left: 50%;top: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px;border-radius: 100px;background-color: #52caff;}</style></head><body><div class="wrapper"><div class="flex-1"></div><div class="flex-2"><div class="circle"></div></div></div></body></html>

Salin selepas log masuk

代码在flex-2中居中画了一个圆,chrome表现很正常,如图

 

 

但是在360极速下,却是这样的:

 

找了一下原因,圆在 竖直方向上的相对定位没有生效,即:“top:50%”没起作用;

为什么没作用呢,我认为是div.flex-1没有显式的写出高度,"flex:0 0 500px"是flex属性的缩写,

,换一种写法就可以搞定:

其实就是给div定个高度。而这个时候又在考虑,高度不定的情况下怎么办?

用css3 calc()?这样的话遇到flex子区域有相对定位时flex就没有使用必要了。虽然遇到的问题解决了,但似乎又来了新的问题。

国内浏览器兼容模式下为什么会表现的不一样。。。。。。。。。。。。。

 

Atas ialah kandungan terperinci 浏览器兼容性问题的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tempat memuat turun aplikasi jubi.com Tempat memuat turun aplikasi jubi.com Mar 05, 2025 pm 09:06 PM

Tempat memuat turun aplikasi jubi.com

Muat turun laman web rasmi Android Muat turun laman web rasmi Android Mar 05, 2025 pm 07:54 PM

Muat turun laman web rasmi Android

Portal pendaftaran terkini untuk laman web rasmi OUYI Portal pendaftaran terkini untuk laman web rasmi OUYI Mar 21, 2025 pm 05:54 PM

Portal pendaftaran terkini untuk laman web rasmi OUYI

Apakah laman web aplikasi perisian pasaran yang tidak mengenakan wang Apakah laman web aplikasi perisian pasaran yang tidak mengenakan wang Mar 05, 2025 pm 08:57 PM

Apakah laman web aplikasi perisian pasaran yang tidak mengenakan wang

Port Login Exchange Coinbase 2025 Port Login Exchange Coinbase 2025 Mar 21, 2025 pm 05:51 PM

Port Login Exchange Coinbase 2025

Portal Log Masuk Laman Web Rasmi Versi terbaru Huobi Exchange Portal Log Masuk Laman Web Rasmi Versi terbaru Huobi Exchange Mar 05, 2025 pm 08:39 PM

Portal Log Masuk Laman Web Rasmi Versi terbaru Huobi Exchange

Tutorial muat turun domestik Tutorial muat turun domestik Mar 21, 2025 pm 05:42 PM

Tutorial muat turun domestik

Portal pendaftaran OUYI Exchange Web Versi OUYI Portal pendaftaran OUYI Exchange Web Versi OUYI Mar 20, 2025 pm 05:48 PM

Portal pendaftaran OUYI Exchange Web Versi OUYI

See all articles