Home > Developer > JavaScript
Frequently Asked Questions about compiling html pages (1): compiling html pages
When it comes to writing pages, many people may encounter many details and compatibility issues when they are just getting started with writing pages. Here I will summarize some small problems that I often encounter. Hope to help beginners who build learning pages!
Although many companies in ie6 have abandoned it, I personally think that it is quite necessary for beginners to learn how to build pages! So here I will talk about a classic compatibility issue in ie6!
Ie6 bilateral distance problem
Production Environment:When the outer margin of the box is in the same direction as the floating margin, the double margin problem will certainly occur in the IE 6 browser.
For example, css is as follows:
<style type="text/css">.chrome,.ie{width:100px;height:100px;background:pink;}.ie{float:left;margin-left:100px;}.chrome{margin-left:100px;}.clearfix{clear:both;}</style>
The html is as follows:
<Body> <div> solution:Add the problematic box_ Display: inline;This attribute is underlined before it, indicating that only ie6 recognizes this attribute.
Next, let's talk about the style shown in ie if an image has a hyperlink in ie!
Image links have borders in ie
Production Environment:Add a hyperlink to an image with the href attribute
For example, a picture does not have a hyperlink, and an image has a hyperlink.
<body><a href="#" class="chrome"></a></body>There is no problem in other browsers, as shown below
However, in ie, there is a problem with images with hyperlinks, as shown below:
Solution:
Add the border: 0; or border: none; attribute to img.
Of course, the compatibility of IE browser is getting better and better, so Microsoft edge in win10 does not have this problem!
Next, let's talk about a common problem when writing a page, that is, the collapse of the outer margin!
Collapse of the outer margin
Production Environment:The outer margin will collapse when two boxes are nested.
Sometimes, when we build a page, we want to use the margin-top to open the distance between the inner box and the outer box, but we find that the inner box and the outer box will always take effect;
For example, the parent box is placed next to the top of the Child box.
The red box is now 50 PX away from the top of the parent box. After the red box (child level) uses the margin-top, the two boxes will fall together.
This is the margin collapse problem.
Solution:
1. Add attributes to the parent level: overflow: hidden; (recommended)
2. Add float to the parent or child level (sometimes the layout is being set up and the child level needs to be floating, such as the left and right layout, so there will be no collapse of the outer margin at this time)
3. Add the border attribute to the parent level (it is not recommended because the border style is not required in many cases in our box)
I hope to help beginners. I also hope you can give me more advice. I still have some questions to share with me. Other questions will be answered as soon as possible! I started with the most basic record!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
