1.Vertical centering problem of div
vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; and then insert text, It's centered vertically. The disadvantage is that the content must be controlled not to wrap.
2. The problem of doubling the margin
The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6. The solution is to add display:inline;
3. Double distance generated by floating ie
#box{ float:left; width:100px; margin: 0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore floats}
Here is a detailed description of the two elements block and inline: The characteristic of the block element is that it is always Starting on a new line, the height, width, line height, and margins can all be controlled (block element); the characteristic of the Inline element is that it is on the same line as other elements and cannot be controlled (inline element);
#box { display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;
4 IE and width and height issues
IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.
For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
4 Problems with IE and width and height
IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.
For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5. Minimum width of the page
min-width is a very convenient CSS command. It can specify that the minimum element cannot be smaller than a certain width, so as to ensure that the layout is always correct. . But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a
6. DIV floating IE text produces a 3-pixel bug
The object on the left is floating, and the right is positioned using the left margin of the outer patch. The text in the object on the right will be some distance from the left 3px spacing.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //This sentence is the key}
＜div id="box">
＜div id="left">＜/div>
＜div id="right">＜/div>
＜/div>
7. IE hide-and-seek problem
When the div application is complex and there are some links in each column, the hide-and-seek problem of DIV will easily occur at this time.
Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page. Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.
8.float div closure; clear float; adaptive height;
①For example: ＜#div id="floatA" >＜#div id="floatB" >＜#div id =”NOTfloatC” >The NOTfloatC here does not want to continue to translate, but wants to move down. (The properties of floatA and floatB have been set to float:left;)
This code has no problem in IE, but the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed. Add
② As the div of the external wrapper, do not set the height. In order to allow the height to automatically adapt, add it to the wrapper. Go to overflow:hidden; When a box containing float is included, the height automatic adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (the evil IE!) You can use zoom:1; to achieve this. compatible.
For example, a wrapper is defined as follows:
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③For typesetting, the CSS description we use most is probably float :left. Sometimes we need to create a unified background behind the float div in column n, for example:
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
Or this Settings: .hackbox{ display:table; //Display the object as a table at the block element level}
９． Height non-adaptation
Height non-adaptation means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses margin or paddign.
#box {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
＜div id="box">
＜p>Content in p object＜/p>
＜/div>
Solution technique: Add 2 empty div objects above and below the P object CSS code: .1{height:0px;overflow:hidden;}or add border attribute to DIV.
10. Why is there a gap under the image under IE6?
There are many techniques to solve this BUG. You can change the layout of the html, or set the img to display:block or set the vertical-align attribute to vertical- align:top | bottom | middle | text-bottom can all be solved.
11. How to align text and text input box
plus vertical-align:middle;
＜style type="text/css">＜!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
＜/style>
12. Is there any difference between defining id and class in web standards?
1. Repeating IDs is not allowed in web standards. For example, div id="aa" is not allowed to be repeated twice, and class definition is not allowed. is a class, which can theoretically be repeated infinitely, so that definitions that require multiple references can use it.
2. Priority issues of attributes
ID has a higher priority than class, see above Example
3. Convenient for client-side scripts such as JS. If you want to perform script operations on an object in the page, you can define an ID for it. Otherwise, you can only use traversing the page elements and specifying specific attributes. Finding it is a relative waste of time and resources, and is far less simple than an ID.
13. The technique of displaying ellipsis after the content in LI exceeds the length
This technique is suitable for IE and OP browsers
＜style type="text/css">
＜!--
li {
width:200px;
white-space:nowrap;
text-overflow :ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
＜/style>
14. Why can’t IE set the scroll bar color in web standards?
The solution is to replace the body with html
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
＜meta http-equiv="Content-Type"
content=" text/html; charset=gb2312" />
＜style type="text/css">
＜!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
＜/style>
15. Why it cannot be defined Containers with a height of about 1px
This problem under IE6 is caused by the default line height, and there are many solving techniques, such as: overflow:hidden zoom:0.08 line-height:1px
16 .How to make the layer display on top of FLASH
The solution is to set transparency for FLASH
＜param name="wmode" value="transparent" />
17. How to vertically center a layer in the browser
Here we use percentage absolute positioning and the technique of patching negative values. The size of the negative value is its own width and height divided by two
＜style type="text/css">
＜!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
＜/style>
1. Div centering problem
The div is already centered when margin-left and margin-right are set to auto. IE does not work. IE needs to set the body to be centered. First, set the body to center. Define text-algin: center; this means that the content within the parent element is centered.
2. The border and background of the link (a tag)
To add a border and background color to the a link, you need to set display: block, and set float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.
3. The problem that the hover style does not appear after the hyperlink is visited
The hyperlink style that was clicked and visited no longer has hover and active. Many people must have encountered this problem. The solution is to change the order of CSS properties: L-V-H-A
Code:
＜style type="text/css">
＜!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
＜/style>
4. Cursor finger cursor
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand only IE can
5.UL's padding and margin
ul tag has padding value by default in FF , and in IE only margin has a value by default, so defining ul{margin:0;padding:0;} first can solve most problems
6. FORM tag
This label will automatically have some margins in IE, while in FF the margin is 0. Therefore, if you want to display it consistently, it is best to specify margin and padding in css. In response to the above two problems, my In css, the style ul is generally used first, and form{margin:0;padding:0;} is defined, so you won’t have a headache later.
7. The problem of inconsistent BOX model interpretation
The BOX model interpretation in FF and IE is inconsistent, resulting in a 2px difference. Solution: div{margin:30px!important;margin:28px;} Pay attention to these two margins The order of must not be reversed. IE cannot recognize the important attribute, but other browsers can. So it is actually interpreted like this under IE: If div{maring:30px;margin:28px} is repeatedly defined, it will be executed according to the last one, so you cannot just write margin:xx px!important;
8. Attribute selector (this It cannot be considered compatible, it is a bug in hiding css)
p[id]{}div[id]{}
This is hidden for versions below IE6.0 and IE6.0, FF and OPera Function. There is still a difference between attribute selectors and sub-selectors. The scope of sub-selectors is narrowed in form, while the scope of attribute selectors is relatively large. For example, in p[id], all p tags with ids are the same.
9. The most ruthless method - !important;
If there is really no way to solve some detailed problems, you can use this technique. FF will automatically parse "!important" first, However, IE will ignore it. The following is
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background :url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
It is worth noting that the sentence xxxx !important must be placed above another sentence , as mentioned above
11. Why the text under FF cannot expand the height of the container
Containers with fixed height values in standard browsers will not be expanded like in IE6 If it is open, then I want to fix the height and also want it to be stretched open. What settings should I make? The way is to remove the height and set min- height:200px; here, in order to take care of IE6 that does not know min-height, it can be defined like this:
{
height:auto!important;
height:200px;
min- height:200px;
}
12. How to make continuous long fields automatically wrap under FireFox
As we all know, use word-wrap:break-word directly in IE. Okay, in FF we use the JS technique of inserting
to solve the problem
＜style type="text/css">
＜!--
div {
width: 300px;
word-wrap:break-word;
border:1px solid red;
}
-->
＜/style>
＜div id= "ff">aaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>
13. Why does the container under IE6 The interpretation of width and FF are different
＜?xml version="1.0" encoding="gb2312"?>
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-strict.dtd">
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
＜style type="text/css">
＜!--
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
＜/style>
＜div ōnclick="alert(this.offsetWidth)"> Make FireFox compatible with IE＜/div>
The difference in the problem is whether the overall width of the container includes the width of the border. Here IE6 interprets it as 200PX, while FF interprets it as 220PX. So what exactly causes the problem? If you remove the xml at the top of the container, you will find that the original problem lies here. The statement at the top triggers IE's qurks mode. For relevant knowledge about qurks mode and standards mode, please refer to: http://www.microsoft.com/china /msdn/library/webservices /asp.net/
ASPNETusStan.mspx?mfr=true
IE6, IE7, FF
IE7.0 is out and supports CSS again New question. There are many browsers, and the network Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
Pay attention to the order.
This is also a CSS HACK, but it is not as simple as the above.
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; } /* IE7 */
The second method is to use IE-specific conditional comments
＜!--Other browsers-->
＜link rel=" stylesheet" type="text/css" href="css.css" />
＜!--[if IE 7]>
＜!-- Suitable for IE7 -->
＜link rel="stylesheet" type="text/css" href="ie7.css" />
＜![endif]-->
＜!--[ if lte IE 6]>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
