plsql を使用してユーザーにコンテンツを配信するオンライン システムがあります。基盤となるシステムには、特定の要素に対して独自のスタイル設定がありますが、そのほとんどは、特定のクライアント用に別の css ファイルでオーバーライドできます。現在、あるクライアントのために、plsql がページ上の現在の空席をすべて引き出すセクションに取り組んでいます。html 自体は plsql プロシージャにハードコードされているため、システムからどのように出力されるかを操作する必要があります。下の画像 (Firefox で表示) を見ると、ページに表示されている多くのジョブの 1 つが表示されます。すべてのジョブは同じ html 構造を持っています (以下の図 1 を参照)。私が Firefox と他のすべてのブラウザーでそれをレンダリングする方法は完璧ですが (画像で示されているように)、IE7 ではひどく見えます (図 2)。CSS を IE7 で正しくレンダリングするために何ができるか、CSS に追加できるアイデアはありますか? 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;
}