Compatibility with the inline-block property
|
<br />A year ago, there were no articles about the inline-block property on the Internet. In order to help everyone better understand this property, I summarized and compiled an article "In-depth Understanding of display:inline-block" at that time. Now there are more and more demands for the use of inline-block attribute. Unfortunately, only Firefox 3 beta, IE8 beta, Opera and Safari support inline-block attribute (Note: originally only Opera and Safari supported it). However, IE6 and IE7 can simulate it by triggering hasLayout. Firefox 2 has -moz-inline-box and -moz-inline-stack private attributes (the comparison of these two attributes is quoted from Qin Ge's "Two Examples of Application of display:inline-block"). In actual applications, -moz-inline-box will have problems such as alignment between elements. Although Firefox also has a private attribute -moz-box-align to help solve the alignment problem, it is still difficult to predict and there are many problems. Relatively speaking, -moz-inline-stack behaves more like inline-block, which can be tested in Firefox3. However, there is a bug when using -moz-inline-stack. If the outer element of an element with display:-moz-inline-stack; is display:inline;, the links contained in it will become unclickable in Firefox. This needs to be solved by using position:relative;. Finally, the code we simulated is as follows: display:inline-block; /*Supported by Firefox3 beta, IE8 beta, Opera, and Safari, triggers hasLayout of inline elements in IE*/ display:-moz-inline-stack; /* Firefox's private property, you can also use -moz-inline-box */ zoom:1; /*Triggers hasLayout in IE*/ *display:inline; /*Once hasLayout is triggered in IE, setting the block element to inline will make display:inline have the same effect as display:inline-block*/ text-indent:-9999px; *text-indent:0; font-size:0; line-height:0; /* If you need to hide text, you can use these four attributes*/ /* In addition, you can use a simpler method to hide the text above: line-height: super large value; font-size: 0; */ overflow:hidden; /*Hide overflow content*/ vertical-align:middle; /* Vertically center the line, for Opera's large deviation*/ width:? px; /*? Any non-auto value*/ height:? px; /*? Any non-auto value*/ |
<<: Nginx server adds Systemd custom service process analysis
Recommend
Example of using rem to replace px in vue project
Table of contents tool Install the plugin Add a ....
Website design should pay attention to the sense of color hierarchy
Recently I have been saying that design needs to h...
Summary of solving the yum error problem after upgrading Python to 3.6.6 on CentOS 7
I recently upgraded a test server operating syste...
How to create your own image using Dockerfile
1. Create an empty directory $ cd /home/xm6f/dev ...
Implementing a simple calculator with javascript
This article example shares the specific code of ...
Mobile Internet Era: Responsive Web Design Has Become a General Trend
We are in an era of rapid development of mobile In...
How is a SQL statement executed in MySQL?
Table of contents 1. Analysis of MySQL architectu...
Detailed steps for debugging VUE projects in IDEA
To debug js code, you need to write debugger in t...
Web front-end development course What are the web front-end development tools
With the development of Internet technology, user...
IE8 provides a good experience: Activities
Today I had a sneak peek at IE8 beta 1 (hereafter...
Solve the problem of Navicat importing database data structure sql reporting error datetime(0)
Error occurs: When exporting the database from My...
How to set npm to load packages from multiple package sources at the same time
Table of contents 1. Build local storage 2. Creat...
VMware ESXI server virtualization cluster
Table of contents summary Environment and tool pr...
Detailed explanation of MySQL combined index and leftmost matching principle
Preface I have seen many articles about the leftm...
HTML validate HTML validation
HTML validate refers to HTML validation. It is the...