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