IE 9优化css的问题

时间:2014-09-07 19:59:01

标签: css internet-explorer-9

我似乎无法为IE9优化我的网站css 当我的客户使用IE9时令人沮丧

website here

看起来像是浮动的问题。

我已经尝试将所有最小高度100%高度100%但这只能解决一些问题 有不透明度的问题,整个div没有显示

有什么建议吗? :)

How it sadly looks in IE9

    body {
                background-color: lightgray;
                background-image: url('img/wall.jpg');
                background-size: 100%;
                margin: 0;
                font-family: "Courier New";
            }

            #footer a {
                color: black;
            }

            a {
                color: white;
            }

            h1 {
            }

            p {
                margin-top: 64px;
                margin-left: 30px;
                margin-right: 30px;
                color: white;
                font-size: 10pt;
                font-family: "Courier New";
            }

            ol {
                margin-left: 30px;
                margin-right: 30px;
                color: white;
                font-size: 10pt;
                font-family: "Courier New";
            }

            #navbarWrapper a {
                text-decoration: none;
            }

            #wrapper {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }

            #logo {
                background-image: url('img/saefelogo2.png');
                height: 40px;
                width: 228px;
                margin-left: 40px;
                margin-top: 30px;
                margin-bottom: 30px;
                cursor: pointer;
                background-size: auto 100%;
                background-repeat: no-repeat;
            }

            #navbarWrapper {
                position: absolute;
                top: 130px;
                left: 0px;
                width: 500;
            }

            .nav {
                color: white;
                background-color: black; 
                margin-top: 2px;
                margin-bottom: 2px;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 40px;
                text-shadow: 0px 0px 2px #000000;
                width: 400px;
                background-color: rgba(0,0,0,0.4);
                font-size: 10pt;
            }

            .nav:hover {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
                cursor: pointer;
            }

            #firma #nav1 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #natklub #nav2 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #event #nav3 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #uniform #nav4 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #speciel #nav5 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #overv #nav6 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #job #nav7 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #ref #nav8 {
                background-color: rgba(0,0,0,0.6);
                font-weight: bold;
            }

            #socialWrapper {
                position: absolute;
                top: 420px;
                left: 35px;
            }

            #facebook {
                height: 30px;
                width: 30px;
                display: inline-block;
                background-image: url('img/facebook.png');
                margin: 2px;
                background-size: 100%;
                opacity: 0.6;
            }

            #linkdin {
                height: 30px;
                width: 30px;
                display: inline-block;
                margin: 2px;
                background-image: url('img/linkdin.png');
                background-size: 100%;
                opacity: 0.6;
            }

            #linkdin:hover, #facebook:hover {
                opacity: 0.9;
                cursor: pointer;
            }

            #footer {
                width: 400px;
                position: absolute;
                bottom: 20px;
                left: 40px;
                font-size: 13px;
            }

            #contentWrapper {
                position: absolute;
                width: 600px;
                top: 0px;
                left: 500px;
                /*height: 100%;*/
                background-color: rgba(0,0,0,0.9);
                min-height: 100%;
                height: 100%;
            }

            #contentHeader {
                padding-bottom: 35px;
                height: 45px;
                vertical-align: bottom;
                color: white;
                font-size: 17px;
                font-weight: bold;
                padding-top: 55px;
                padding-left: 30px;
            }

            #contentHeader2 {
                padding-bottom: 35px;
                height: 60px;
                vertical-align: bottom;
                color: white;
                font-size: 17px;
                font-weight: bold;
                padding-top: 40px;
                padding-left: 30px;
            }

            #uoverskrift {
                font-size: 15px;
                font-weight: normal;
            }

            #pictureWrapper {
                height: 225px;
                width: 600px;
            }

            #index #picture { 
                background-image: url('img/index.png');
                background-size: auto 100%;
                height: 225px;
            }

            #event #picture { 
                background-image: url('img/event.png');
                background-size: auto 100%;
                height: 225px;
            }

            #natklub #picture { 
                background-image: url('img/natclub.png');
                background-size: auto 100%;
                height: 225px;
            }

            #firma #picture { 
                background-image: url('img/firma.png');
                background-size: auto 100%;
                height: 225px;
            }

            #uniform #picture { 
                background-image: url('img/uniform2.png');
                background-size: auto 100%;
                height: 225px;
            }

            #speciel #picture { 
                background-image: url('img/special.png');
                background-size: auto 100%;
                height: 225px;
            }

            #overv #picture { 
                background-image: url('img/materiel.png');
                background-size: auto 100%;
                height: 225px;
            }

            #job #picture { 
                background-image: url('img/job.png');
                background-size: auto 100%;
                height: 225px;
            }

            #ref #picture { 
                background-image: url('img/ref.png');
                background-size: auto 100%;
                height: 225px;
            }

            #textWrapper {
                width: 600px;
            }

            #hstreg1 {
                height: 1px;
                min-width: 100%;
                width: 100%;
                background-color: black;
                position: absolute;
                top: 100px;
                left: 0px;
            }

            #hstreg2 {
                top: 393px;
                height: 1px;
                min-width: 100%;
                width: 100%;
                background-color: black;
                position: absolute;
            }

            #vstreg1 {
                top: 0px;
                left: 470px;
                min-height: 100%;
                height: 100%;
                width: 1px;
                background-color: black;
                position: absolute;
            }

            #vstreg2 {
                top: 0px;
                left: 1128px;
                min-height: 100%;
                height: 100%;
                width: 1px;
                background-color: black;
                position: absolute;
            }
            @media screen and (max-device-width: 480px){
                body{
                    -webkit-text-size-adjust: none;
                }
            }

1 个答案:

答案 0 :(得分:0)

找到修复

显然,对于IE来说,doctype正确拼写是很重要的!

<!DOCTYPE html>