0

これは私のCSSコードです：

.thzPartsHeader, .thzPartsContainer {
    border:1px solid #0080ff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
    -moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
    box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
    padding: 5px 20px 5px 20px;
    margin:auto;

    font-family:georgia;
    font-size: 12px;
    color:#ffffff;
    background-color:#000000;
}

これはHTMLコードです：

<fieldset class="thzPartsContainer">
    <legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend>
    <textarea class="textArea" id="txtarea" name="codearea"></textarea>
</fieldset>

これはGoogleChromeでの表示方法です（これはまさに私が欲しいものです）：

https://googledrive.com/host/0BxoUWoRI6JTIRi11REZfWEtrcU0/chromepreview.jpg

しかし、これはFirefoxでの表示方法です（画像を投稿する評判はありません：o）:( ソース：googledrive.com）https://googledrive.com/host/0BxoUWoRI6JTIRi11REZfWEtrcU0/firefoxpreview.jpg

margin:autoFirefoxで影が移動し、プロパティが機能していないように見えます。それらの両方の修正は何ですか？助けてください。

http://jsfiddle.net/f2ndc/

4

1 に答える 1

0

あなたの質問の影の部分はの複製です

<fieldset> を使用したボックス シャドウ CSS。Firefox 対 Chrome

の高さと幅を固定する必要があるため、最適なソリューションではありませんが、<legend>これを追加するとうまくいく可能性があります

.thzPartsHeader{
    position: absolute;
    top: -9px;
    left: 50%;
    margin-left: -75px;
}
.thzPartsContainer{
  padding-top: 9px;
  position: relative;
}

フィドル: http://jsfiddle.net/FBca7/2/

于 2013-03-07T21:48:00.373 に答える