Solutions to common CSS compatibility issues
这次给大家带来CSS的常见兼容性问题解决方案，CSS常见兼容性问题的注意事项有哪些，下面就是实战案例，一起来看一下。
一、不同浏览器的标签默认的外补丁和内部顶不同
这个大家就很常见了，我们知道每个浏览器对margin和padding的处理问题很大，我们一般都会碰到这个问题，常用的解决办法就是使用通配符*来将其初始化
解决办法：
*{ margin：0； padding:0;}1234另一种方法建议大家使用的就是使用reset文件，其不仅省心外，还有的两个好处就是方便程序员的的发挥和便于发现前端代码的遗漏。
二、块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div的float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。问题出现的症状就是iE6通常后面的一块会被挤下去，如果你的代码比较复杂，这个问题将很容易碰到，这是float布局中最常见的问题，
解决方案：
在float的标签样式控制中加入display:inline;将其转化为行内属性
三、cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
四、 innerText在IE中能正常工作，但在FireFox中却不行.
if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "my text";
} else{ document.getElementById('element').textContent = "my text";
}12345五、 CSS透明
IE： filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。1 FF： opacity:0.6。1
六、css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
七、FF和IE的盒子模型解释不一致导致相差2px
box.style{ width:100; border 1px;}1234
ie理解为box.width = 100 ff理解为box.width = 100 + 1*2 = 102 //加上边框2px八、IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
解决办法，我们可以让通过javascript设置。
九、超链接访问后hover样式不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
a:link{};a:visited{};a:hover{};a:active{};1234十、form标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}
十一、图片间距的问题
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了 *{margin:0;padding:0;}的通配符也不起作用。
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道
十二、IE6不支持fixed
解决办法
.DIV名称{height: 92px;width: 100%;position: fixed;top: 0;_position: absolute;_bottom: auto;_top:expression(eval(document.documentElement.scrollTop));}123456789
解释_是专门用来解决兼性设置的，里面还是通过eval解析javascript代码来设置javascript代码。
十三、IE个版本的hack
CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划线”“，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack：针对所有IE：
/*类内部hack：*/
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/
/*选择器Hack：*/
*html .header{} /*IE6*/
*+html .header{}/*IE7*/12345678910111213总结：
Many compatibility issues are related to IE browser. I recommend you to use IETester, a software for testing IE compatibility, which can test the compatibility of various versions of IE browser. For other issues, the browser There are still many compatibility issues, which we will encounter in future studies. The most common way is to solve them through if statements or ternary operator. This is very useful, and the rest is individual. There are differences in attributes, and some solutions are mentioned above. It is better to accumulate them slowly by yourself!
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Methods for front-end page testing
The application of call and apply in javascript
How to use spring boot’s scheduled tasks
The above is the detailed content of Solutions to common CSS compatibility issues. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Solution for Win11 unable to install Chinese language pack
Mar 09, 2024 am 09:15 AM
Win11 is the latest operating system launched by Microsoft. Compared with previous versions, Win11 has greatly improved the interface design and user experience. However, some users reported that they encountered the problem of being unable to install the Chinese language pack after installing Win11, which caused trouble for them to use Chinese in the system. This article will provide some solutions to the problem that Win11 cannot install the Chinese language pack to help users use Chinese smoothly. First, we need to understand why the Chinese language pack cannot be installed. Generally speaking, Win11
An effective solution to solve the problem of garbled characters caused by Oracle character set modification
Mar 03, 2024 am 09:57 AM
Title: An effective solution to solve the problem of garbled characters caused by Oracle character set modification. In Oracle database, when the character set is modified, the problem of garbled characters often occurs due to the presence of incompatible characters in the data. In order to solve this problem, we need to adopt some effective solutions. This article will introduce some specific solutions and code examples to solve the problem of garbled characters caused by Oracle character set modification. 1. Export data and reset the character set. First, we can export the data in the database by using the expdp command.
Oracle NVL function common problems and solutions
Mar 10, 2024 am 08:42 AM
Common problems and solutions for OracleNVL function Oracle database is a widely used relational database system, and it is often necessary to deal with null values during data processing. In order to deal with the problems caused by null values, Oracle provides the NVL function to handle null values. This article will introduce common problems and solutions of NVL functions, and provide specific code examples. Question 1: Improper usage of NVL function. The basic syntax of NVL function is: NVL(expr1,default_value).
Implementing Machine Learning Algorithms in C++: Common Challenges and Solutions
Jun 03, 2024 pm 01:25 PM
Common challenges faced by machine learning algorithms in C++ include memory management, multi-threading, performance optimization, and maintainability. Solutions include using smart pointers, modern threading libraries, SIMD instructions and third-party libraries, as well as following coding style guidelines and using automation tools. Practical cases show how to use the Eigen library to implement linear regression algorithms, effectively manage memory and use high-performance matrix operations.
Common causes and solutions for Chinese garbled characters in MySQL installation
Mar 02, 2024 am 09:00 AM
Common reasons and solutions for Chinese garbled characters in MySQL installation MySQL is a commonly used relational database management system, but you may encounter the problem of Chinese garbled characters during use, which brings trouble to developers and system administrators. The problem of Chinese garbled characters is mainly caused by incorrect character set settings, inconsistent character sets between the database server and the client, etc. This article will introduce in detail the common causes and solutions of Chinese garbled characters in MySQL installation to help everyone better solve this problem. 1. Common reasons: character set setting
How compatible is the Go language on Linux systems?
Mar 22, 2024 am 10:36 AM
The Go language has very good compatibility on Linux systems. It can run seamlessly on various Linux distributions and supports processors of different architectures. This article will introduce the compatibility of Go language on Linux systems and demonstrate its powerful applicability through specific code examples. 1. Install the Go language environment. Installing the Go language environment on a Linux system is very simple. You only need to download the corresponding Go binary package and set the relevant environment variables. Following are the steps to install Go language on Ubuntu system:
Common causes and solutions for Chinese garbled characters in PHP
Mar 16, 2024 am 11:51 AM
Common causes and solutions for PHP Chinese garbled characters. With the development of the Internet, Chinese websites play an increasingly important role in our lives. However, in PHP development, the problem of Chinese garbled characters is still a common problem that troubles developers. This article will introduce the common causes of Chinese garbled characters in PHP and provide solutions. It also attaches specific code examples for readers' reference. 1. Common reasons: Inconsistent character encoding: Inconsistencies in PHP file encoding, database encoding, HTML page encoding, etc. may lead to Chinese garbled characters. database
Explore solutions to abnormal CPU and Sys usage in Linux
Mar 01, 2024 pm 05:36 PM
[Title] Explore solutions to abnormal CPU and Sys usage in Linux. In Linux systems, abnormal CPU and Sys usage often make the system run slowly or unstable, causing trouble to users. This article will explore the causes of these anomalies and provide some solutions, as well as specific code examples. Abnormal CPU usage Abnormal CPU usage is usually caused by too many processes running or a certain process occupying too many CPU resources. To solve this problem, you can view the processes running on the system
