Question

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

图1 Fig 1

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
Fig 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移除浮动。

    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;
}

在Internet Explorer 7中按钮呈现错误 - 需要IE7特定的CSS修复

1 个答案: