0

これをどのように表現すればよいかわかりませんが、基本的に IE9 で標準とブラウザ モードを IE9 に設定すると、ボタンのスタイルが正しくレンダリングされません。IE10 との互換性があるかどうかに関係なく、IE9 標準およびブラウザー モードで適切に表示されるため、IE10 でのテストではこのエラーは表示されません。クロムでも完全に機能します。これは、ボタンの入力コードと .css、およびボタンのレンダリングを示すフィドルです。クロムでレンダリングされたボタンのスクリーンショットを添付しました（これは正しいです）ので、どのように見えるかがわかります。これに対する回避策がわからず、誰かが助けてくれることを望んでいました.

http://jsfiddle.net/LLHeD/

.button_standard,
.CommandButton,
.CommandButtonNoWidth,
.CommandButtonWorkflow,
.CommandButtonWorkflowNotify
{
    border-top: #F4E6CC 2px solid;
    border-right: #BFB087 2px solid;
    border-bottom: #ABA476 2px solid;
    border-left: #F5DFBA 2px solid;
    padding: 0;
    font-weight: bold;
    font-size: 8pt;
    margin: 0;
    color: #666666;
    background-color: #F3D29D;
    text-decoartion: none;
    cursor:pointer; 
}

<input type="submit" name="ucDocSearchForm$btnSearch" value="Search" onclick="return validateDates();" id="ucDocSearchForm_btnSearch" class="CommandButtonNoWidth" name="btnSearch" onMouseOver="this.src='/applications/images/search_over_clink.gif'" onMouseOut="this.src='/applications/images/search_on_clink.gif'" style="font-weight:bold;width:65px" />

ここに画像の説明を入力

4

1 に答える 1

1

borderあなたの問題は、スタイル内の宣言の順序にある​​ようです。

CSS border(およびborder-leftなど) は、、、 をこの順序で連結して指定されます。border-widthborder-styleborder-color

あなたはそれらを完全に異なる順序で持っています。

理論的には、順序を間違えると問題が発生する可能性があります。実際には、それが実際に頻繁に起こるのを見たことがありません。3 つの値は簡単に区別できるため、ブラウザーは一般に、この場合の意味を理解するのに非常に優れています (他のスタイルはこの点でより要求が厳しくなりますが、border一般的にはそうではありません)。

ただし、コード内で値を正しい順序に切り替えると意図したとおりに機能するため、理論と実践に関する議論はここでは窓の外に出てしまいます。明らかにそれが問題です。

更新されたフィドルは次のとおりです。http://jsfiddle.net/LLHeD/2/

それが役立つことを願っています。

于 2013-09-16T14:02:45.650 に答える