An instance compatible with Div + css ie 6, 7, and 8

Source: Internet
Author: User

=============Solve the padding problem between IE6 and IE8 ================
At first, I thought that the width = width + pading displayed by adding padding to IE6 was actually not. I couldn't find any information under IE.
In this case, you need to check the CSS settings.
View me:
Front-end code:
<Asp: repeater id = "rpt_zzjs" runat = "server">
<Headertemplate> <ul class = "ul_con"> <Itemtemplate> <li> <a href = "<% # getrequst. getrequsetquerystring ("vid") %>/content/<% # eval ("ID") %>. do "> · <% # common. getleftstring (eval ("title "). tostring (), 22) %> </a> </LI> </itemtemplate>
<Footertemplate> </ul> </footertemplate>
</ASP: repeater>

Original CSS code
. Ul_con Li {Line-Height: 170%; float: Left; width: 100%; _ width: 100%; text-align: Left; font-size: 13px; border-bottom: solid 1px # ececec; Background-image: URL ('/Village/content/icon/title.gif'); background-repeat: No-Repeat; Background-position: left center; padding-left: 10px; float: Left; position: relative ;}

IE7 and 8 are okay. The total width of UL table in IE6 is increased by 10 PX, and the interface is ugly. The pading value of IE6 is added at the beginning. If you find the materials, you will not add them. They will only be added in Firefox.
After thinking about it, it turns out that the width displayed in IE6 is Li's padding + A's width = 10 + 100%. No wonder it will increase. Now I write padding in A to solve the problem.
The Code is as follows:
. Ul_con Li {Line-Height: 170%; float: Left; width: 100%; _ width: 100%; text-align: Left; font-size: 13px; border-bottom: solid 1px # ececec ;}
. Ul_con Li a {background-image: URL ('/Village/content/icon/title.gif'); background-repeat: No-Repeat; Background-position: left center; padding-left: 10px; float: Left; position: relative ;}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.