Tips for front-end development to avoid browser compatibility issues

This article is mainly for novice architects who have just stepped into the front-end development ranks.

The novice front-end architect, who is not familiar with the XHTML specification when writing HTML code, often randomly uses HTML tags for code nesting, resulting in multiple browsers showing incompatibilities. Back to the browser bug to modify the use of a variety of hack to remedy, the end is bitter self bitter users.

Browser style bug is actually due to the browser parsing rules of each age is not the same, each age of the browser with its own "small temper", which is why you write a page, in different browsers display the same style.

This article will show you how to sort out ideas when writing code, and guide you to use the correct code writing specifications to say goodbye to the myriad of compatibility issues.

Before we get to know the spec, we need to look at the browser bug. Because Microsoft in the browser domain has not fully followed the World Wide Web code, resulting in various versions of IE will appear different style bugs. In IE bug mainly in IE6, IE7 will appear a small number of width problems, IE8 in the bug is mainly concentrated in the filter. As the IE7, IE8 bugs are easier to solve, so this article is not much elaboration. If you need to know about common bugs and workarounds for IE, check out the "common bugs and workarounds in IE6" in the blog post.

First, the page code implementation sequence and step planning

Do everything before you plan to execute, for writing front-end code is no exception. After we get the PSD of the art design, we need to do enough analysis on the page results first. The thinking page is divided into chunks, what labels I should use, what floats, etc., and how to build up the early frames.

As shown; this is a template similar to the enterprise site, the first look at the content is very complex, but through the careful observation of the page we can find that this page is composed of the left side, the right part, the page three blocks of the foot.

So the first thing we need to do is to set up the page in three blocks and determine the width of the left and right parallel elements so that they can be displayed properly in each browser. Having done this, we have made a good foundation for the construction of the page.

Later we need to start to further differentiate the contents of the chunk elements, observing that there are several modules, whether the same module is available, or if the CSS style can be reused. When building a small module, you need to be aware that as far as possible block-level element positioning, float floating element not with the block-level elements in the same column. If you need to have multiple elements of a tile in the same column, add the float property to the elements and set the corresponding width.

Second, understand the attributes of each label and the built-in style

Many novices don't know the exact meaning of the various tags in HTML. When you start writing DIV+CSS code, you use a large number of even full div layouts. Although the style attributes of a div can be modified in CSS, the problem with this is that the code is not valid for identification and is prone to the omission of a closed div.

So we need to read the HTML reference manual carefully to see which tags can be directly tiled in the same column, which are block-level elements, can only be arranged in the same order, which elements do not affect the layout style, and so on.

Third, keep in mind the browser common bug processing way, when the code was first written to consider resolving compatibility issues

In fact, when you first write your code, you can start thinking about whether the style of the element will cause compatibility issues with other browsers.

As a common example: the float element in IE, if the margin value is set at the same time, the value of margin will be doubled, the solution is to add display:inline to the element. If we know the solution to the bug, we can develop a habit of writing it. For example, when we add a float and margin value to an element, we make a display:inline for the element so that it effectively avoids the bug of double margins on the page.

So in the work to constantly record and summarize the browser bug processing, and think about its laws and characteristics, the next time you write code, with the corresponding compatibility bug processing code. Through the accumulation of continuous experience, will slowly find that the code you write can be normal in the browser to show.

Four, use as little as possible, not even using negative margin and padding

Generally use negative margin and padding, because the style can not be in the way they want to move, just "out of this." This is likely to bring a lot of strange bugs to the future element style, making the later work even more difficult.

If you encounter an offset operation that does need to be moved beyond some elements, the best approach is to use position to position the element. Because position this attribute definition is the positioning mechanism used to establish the layout of the elements. Any element can be positioned, but an absolute or fixed element generates a block-level box, regardless of the type of the element itself. Therefore, we use the position for some special positioning operation is the most ideal.

After each column floating element, set clear float

When the element floats, it causes the element to be surfaced so that its parent element cannot change its height by following the height of the floating element. The problem is that floating elements are outside the scope of the parent element's package, and if followed by text, or floating elements, the layout will be confusing.

So we finally have to clear the floating element code in each column, so that the entire parent element can properly wrap its inner floating elements, avoid these naughty float elements around.

The simplest way to clear floats is to add <div style= "Clear:both" after the last floating element ></div>

• This article fixed link: http://www.frontopen.com/1129.html
• Reprint Please specify: Taste Life July 17, 2013 in front-end pioneer published

Tips for front-end development to avoid browser compatibility issues