html - 按钮在 Internet Explorer 7 中呈现不正确 - 需要 IE7 特定的 CSS 修复

Question

我们有一个在线系统，使用 plsql 向用户传递内容。底层系统对某些元素有自己的样式，但大多数元素都可以为特定客户端使用单独的 css 文件来覆盖。目前我正在为我们的一个客户开发一个部分，其中 plsql 提取页面上的所有当前空缺。 html 本身被硬编码到 plsql 过程中，所以我必须处理它是如何从系统中出来的。如果您查看下图(在 Firefox 中显示)，您将看到页面上显示的众多工作之一。所有作业都具有相同的 html 结构(如下图 1 所示)。我设法在 Firefox 和所有其他浏览器中呈现它的方式是完美的(如图所示)但是在 IE7 中它看起来很糟糕(图 2)。任何想法我可以做什么/添加到我的 css 以使其在 IE7 中正确呈现？可以在本页底部找到来自 Firebug 的计算 CSS。

图一

HTML

<div class="jobpost Job Postings">
<div class="template_image"></div>
    <div class="jobpost_body">
        <h2>
        <a href="/icamstest/wd/plsql/wd_portal.show_job?p_web_site_id=4227&p_web_page_id=156962">Head of Operations</a>
        </h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing tincidunt males uada. Aenean metus lorem, lacinia est. Maecenas sit amet magna rhoncus imperdiet. Quisque consectetur lacinia felis, posumassa fermentum vel. Morbi metus nibh, tincidunt luctus hendrerit, iaculis sed velit.
        <br>
        <br>
        Suspendisse potenti. Praesent sit amet rhoncus nisi. Etiam tristique velit ut felis ultrices pulvinar. Ut elit leo, condimentum nec consectetur non, tincidunt malesuada lorem.
        </p>

        <p class="jobpost_classifications">
            <span class="jobclass even location">
                <span class="jobclass_type">Location:</span>
                <span class="jobvalue">  Birmingham</span>
            </span>
            <span class="jobclass uneven date_on">
                <span class="jobclass_type">Date posted:</span>
                    26/11/2012 
            </span>
            <span class="jobclass even date_off">
                <span class="jobclass_type">Closing Date:</span>
                    31/01/2013 
                </span>
            <span class="jobclass uneven refno">
                <span class="jobclass_type">Ref No:</span>
                    85 
                </span>
        </p>
    </div>

    <div class="jobpost_nav">
        <p>
            <a class="apply_direct" title="Apply For Position ? (Head of Operations)" href="/icamstest/wd/plsql/wd_portal_cand.form?p_web_site_id=4227&p_web_page_id=156962">Apply For Position ? </a>
            <a class="send_a_friend" title="Send a friend (Head of Operations)" href="/icamstest/wd/plsql/wd_portal.send_a_friend?p_web_site_id=4227&p_web_page_id=156962">Send a friend</a>
        </p>
</div>

</div>

图2


CSS

        div.jobpost {
        border-bottom: 1px solid #CCCCCC;
        padding-top: 15px;
    }
    div.jobpost {
        float: left;
        margin: 0;
        width: 100%;
    }
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
        background: none repeat scroll 0 0 transparent;
        font-size: 100%;
        outline: 0 none;
        vertical-align: baseline;
    }

    div.jobpost div.jobpost_body {
        float: left;
        margin: 0;
        padding: 0;
    }
    div.jobpost_body {
        overflow: hidden;
    }

    #icams_inserted {
        color: #6D7A7E !important;
        font-family: Arial !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 400 !important;
    }
    html.ext-strict body {
        text-align: left !important;
    }
    body {
        color: #6D7A7E;
    }

    .jobpost_body h2 {
        font-family: Arial,'Adamina',serif !important;
        font-size: 20px !important;
        font-weight: 400;
        line-height: 1.25;
        margin-bottom: 15px;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #606163;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: Arial,'Adamina',serif;
    }
    h2 {
        font-size: 28px;
    }


    div.jobpost_body h2 a {
        border: 0 solid #FF0000;
        display: block;
        float: left;
        margin: 0 !important;
        padding: 10px 0 0;
        width: 100%;
    }
    .not-ie a, .not-ie a > * {
        transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
    }
    a, a > * {
        color: #6D7A7E;
        text-decoration: none;
    }
    a {
        background: none repeat scroll 0 0 transparent;
        font-size: 100%;
        margin: 0;
        outline: medium none;
        vertical-align: baseline;
    }


    div.jobpost_body h2 a {
        border: 0 solid #FF0000;
        display: block;
        float: left;
        margin: 0 !important;
        padding: 10px 0 0;
        width: 100%;
    }
    .not-ie a, .not-ie a > * {
        transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
    }
    a, a > * {
        color: #6D7A7E;
        text-decoration: none;
    }
    a {
        background: none repeat scroll 0 0 transparent;
        font-size: 100%;
        margin: 0;
        outline: medium none;
        vertical-align: baseline;
    }

    div.jobpost_body p.jobpost_classifications {
        border: 0 none;
        padding-left: 20px;
        padding-right: 0;
        width: 200px;
    }
    div.jobpost_body p {
        clear: none !important;
        display: block;
        float: left;
    }
    div.jobpost_body p {
        clear: left;
        margin: 0 !important;
    }
    .jobpost_body p {
        color: #6D7A7E;
        font: 400 12px/19px Arial;
    }
    p {
        padding-top: 10px !important;
    }
    p {
        margin: 0 0 1.5em;
    }


    .jobclass {
        display: block;
        float: none;
    }

    .jobclass_type {
        color: #6D7A7E;
        font: 700 12px/18px Arial;
        padding-right: 10px;
    }


    .jobclass_type {
        color: #6D7A7E;
        font: 700 12px/18px Arial;
        padding-right: 10px;
    }


    div.jobpost_nav {
        float: left;
        height: 30px;
        margin: 0;
        padding: 10px 0 6px !important;
        width: 100%;
    }


    div.jobpost_nav p {
        margin: 0 !important;
        padding: 0 !important;
    }


    div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
        padding: 8px 14px !important;
    }
    div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
        float: left;
    }
    div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
        padding: 0 20px 0 0 !important;
        width: auto;
    }
    .not-ie a, .not-ie a > * {
        transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
    }
    .apply_now, .apply_direct, .preview input[type="button"], .links > input.continue {
        background: none repeat scroll 0 0 #6A8CB1 !important;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        font: 400 11px Arial;
        margin: 0 5px 17px 0;
        outline: 3px none;
        padding: 8px 14px !important;
        text-align: center;
        text-decoration: none;
        vertical-align: baseline;
    }
    a {
        background: none repeat scroll 0 0 transparent;
        padding: 0;
    }

Answer 1

从 h2 a 的两个地方移除 float 。

    div.jobpost {
    border-bottom: 1px solid #CCCCCC;
    padding-top: 15px;
}
div.jobpost {
    float: left;
    margin: 0;
    width: 100%;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    background: none repeat scroll 0 0 transparent;
    font-size: 100%;
    outline: 0 none;
    vertical-align: baseline;
}

div.jobpost div.jobpost_body {
    float: left;
    margin: 0;
    padding: 0;
}
div.jobpost_body {
    overflow: hidden;
}

#icams_inserted {
    color: #6D7A7E !important;
    font-family: Arial !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}
html.ext-strict body {
    text-align: left !important;
}
body {
    color: #6D7A7E;
}

.jobpost_body h2 {
    font-family: Arial,'Adamina',serif !important;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 15px;
}
h1, h2, h3, h4, h5, h6 {
    color: #606163;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Arial,'Adamina',serif;
}
h2 {
    font-size: 28px;
}


div.jobpost_body h2 a {
    border: 0 solid #FF0000;
    display: block;
    /*float: left;*/ /* <---- HERE */
    margin: 0 !important;
    padding: 10px 0 0;
    width: 100%;
}
.not-ie a, .not-ie a > * {
    transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
a, a > * {
    color: #6D7A7E;
    text-decoration: none;
}
a {
    background: none repeat scroll 0 0 transparent;
    font-size: 100%;
    margin: 0;
    outline: medium none;
    vertical-align: baseline;
}


div.jobpost_body h2 a {
    border: 0 solid #FF0000;
    display: block;
    /*float: left;*/ /* <---- HERE */
    margin: 0 !important;
    padding: 10px 0 0;
    width: 100%;
}
.not-ie a, .not-ie a > * {
    transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
a, a > * {
    color: #6D7A7E;
    text-decoration: none;
}
a {
    background: none repeat scroll 0 0 transparent;
    font-size: 100%;
    margin: 0;
    outline: medium none;
    vertical-align: baseline;
}

div.jobpost_body p.jobpost_classifications {
    border: 0 none;
    padding-left: 20px;
    padding-right: 0;
    width: 200px;
}
div.jobpost_body p {
    clear: none !important;
    display: block;
    float: left;
}
div.jobpost_body p {
    clear: left;
    margin: 0 !important;
}
.jobpost_body p {
    color: #6D7A7E;
    font: 400 12px/19px Arial;
}
p {
    padding-top: 10px !important;
}
p {
    margin: 0 0 1.5em;
}


.jobclass {
    display: block;
    float: none;
}

.jobclass_type {
    color: #6D7A7E;
    font: 700 12px/18px Arial;
    padding-right: 10px;
}


.jobclass_type {
    color: #6D7A7E;
    font: 700 12px/18px Arial;
    padding-right: 10px;
}


div.jobpost_nav {
    float: left;
    height: 30px;
    margin: 0;
    padding: 10px 0 6px !important;
    width: 100%;
}


div.jobpost_nav p {
    margin: 0 !important;
    padding: 0 !important;
}


div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
    padding: 8px 14px !important;
}
div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
    float: left;
}
div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
    padding: 0 20px 0 0 !important;
    width: auto;
}
.not-ie a, .not-ie a > * {
    transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
.apply_now, .apply_direct, .preview input[type="button"], .links > input.continue {
    background: none repeat scroll 0 0 #6A8CB1 !important;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font: 400 11px Arial;
    margin: 0 5px 17px 0;
    outline: 3px none;
    padding: 8px 14px !important;
    text-align: center;
    text-decoration: none;
    vertical-align: baseline;
}
a {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
}