CSS works fine in Chrome, Firefox, and Safari, however fails in Internet Explorer
Question
I'm currently working on a website with a group of friends for a community based site focused on educational programs. As the title states, Internet Explorer is the only web browser that our CSS doesn't seem to work.
Here's a link to the website: http://new.lexingtoncommunityed.org/
The main offenders are within the home.php page and the programs pages. The spacing is completely off from what it looks on other browsers.
We're considering making a new IE stylesheet, however we aren't sure of the difficulties nor practices that we have to do in converting the css over to be compatible with IE, including testing compatibility with other browsers as well. Is it worth it to rebuild the CSS using a framework instead?
3 answers
solution1
1 2016-11-08 02:45:50
Adding the margin-bottom to the body instead of the inner elements will fix the problem for IE, and should not adversely affect the other browsers. Just add margin-bottom: 200px to the body in the CSS, and it should work for IE as well.
solution2
0 2016-11-08 02:36:05
Is it worth it to rebuild the CSS using a framework instead?
No.
On January 12th, 2016, Microsoft wrote :
After January 12, 2016, Microsoft will no longer provide security updates or technical support for older versions of Internet Explorer.
Also:
Q: How long will the most current version of Internet Explorer remain supported?
A: Internet Explorer is a component of the Windows operating system and the most current version will continue to follow the specific support lifecycle policy for the operating system on which it is installed.
Internet Explorer 11 will be supported for the life of Windows 7 , Windows 8.1, and Windows 10.
To find the support lifecycle dates for all operating systems, search the Support Lifecycle Database here .
So, though it still 'works', it's dying. Officially.
Of course, you can change your CSS to work with it, but why? It's own makers are saying "Don't use it"!
Source: microsoft.com
solution3
0 2016-11-08 02:57:40
If you can make sure the height of the footer , you can add margin-bottom to the body. Else you should use js to get the height of the footer, and add it to the margin-bottom of the body
Or you can do like this. If the content's height is too short, you should add min-height to body.
html{height:100%;} body{min-height:100%;margin:0;padding:0;position:relative;color:#fff;} .header{background-color: #ccc;} .main{padding-bottom:100px;background-color: #999;} .footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #333;}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div class="header"> Top </div> <div class="main"> <p>LCE is a self-sustaining, integral part of the Lexington Public Schools, committed to bringing lifelong learning to all. We provide practical, creative, and fun educational opportunities at reasonable cost. We seek to provide the best teachers and the most engaging subjects. Our programs are open to all adults and young adults, regardless of residency. We also offer an extensive summer children's program called LEXPLORATIONS, which offers creative and academic classes. </p> </div> <div class="footer"> info@lexingtoncommunityed.org </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.