The design pain is more troublesome than the woman's Internet Explorer

Browser | design

The design pain is more troublesome than the woman's Internet Explorer

Yesterday to help friends do page navigation style design, require links to deepen the gray border, light gray background, two pixel spacing, I think, this is not simple, with a CSS definition, a few of the finished, I opened Notepad (affirm a point: The Master is always with Notepad to handle all the ^_^), In less than a minute to complete the desired effect of a friend, save code for HTM format, with IE browser open this file, a look, dumbfounded, very ugly, not the general ugly, (such as figure I) quickly open the source file, modified the Padding property, set a padding value of 10px, and then open, This is much better, but this time there is a serious problem, the top border of a tag is missing (see figure II), what's going on, as if it hadn't happened before. I've reviewed the CSS stylesheet code, and that's right, what's the reason?

Figure I

Figure II

Figure Three

So I opened the DW, and in the Design view of the DW I found that the results were exactly the same as I expected (figure III), but how did it look so bad in IE? Not only does not have the upper border line, and the text appears at the top of the border, very asymmetrical, not beautiful, so I find a way to define the text of the CSS elements, unfortunately, there is only one in the CSS definition of horizontal text alignment of the element text-align, So I think smart to sporogenous an element text-valign, defined as: Text-valign:middle, and then save a look at nothing changes, quickly delete this made-up element, how to do? So I also defined in the style of this: border-top:1px solid #ccc, and then save, a look, there is no change, it seems that the problem is not here, there is no way, so I try to define the line height of the text, add a sentence in it: line-height : 28px; At this time its design in the Dr tries to effect as shown in Figure four:

Figure Four

In the middle of the obvious more white shading, at this time in IE, the effect is as shown in Figure five:

Figure Five

The text is already vertically centered, but the top box still hasn't come out, so I modified the padding value of padding:5px 10px; That is to say, the upper and lower margin is 5px, the left and right interior margin is 10px, at this time its design view in the Dr Basically did not happen any big changes, but a bit thinner, as Figure VI:

Figure Six

Then refresh IE browser, wow, this hit right, look out the effect figure seven:

Figure Seven

So I wonder, why a very simple effect to realize it is so difficult, for a mark of the CSS definition, as long as the simple definition of border, background-color and padding attribute values can achieve the effect but toss for so long.

So I went back to the original place, the later to add more attributes are removed, using Firefox browser to open the Web page file, the following figure:

Figure Eight

The following analysis summarizes the results:

Style sheet	IE Browse results	Firefox Browse results
a{ border:1px solid #ccc; Background-color: #F3F3F3; font-size:12px; margin:1px; Color: #333333; Text-decoration:none; padding:10px; }
a{ border:1px solid #ccc; Background-color: #F3F3F3; font-size:12px; margin:1px; Color: #333333; Text-decoration:none; padding:10px; line-height:28px; }
a{ border:1px solid #ccc; Background-color: #F3F3F3; font-size:12px; margin:1px; Color: #333333; Text-decoration:none; padding:5px 10px; line-height:28px; }

The final design effect you want: