0

私の質問は、私のサイトにこれらのボタンアイテム1、アイテム2などがあることです。これで、ボックス/ボタン要素内のテキスト位置はChromeの正しい位置になりますが、Firefoxでは問題が発生し、ボックスの上のどこかに配置されます。テキストが正しく表示されません。

ボックス要素内のテキストを正しい位置に配置できるように、誰かがCSSまたはその他の問題を解決するのを手伝ってくれませんか。

<div class="contents grid_26 push_24">
            <ul class="ca-menu">
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 1<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>

                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 2<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>

                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 3<img src="images/image_1.png" width="22" height="22" class="arrow1"></h2>

                        </div>
                    </a>
                </li>
</div>

<style>
.ca-main{
font-size: 14px;
position: absolute;
top: -17px;
height: 80px;
width: 120px;
left: 70%;
margin-left: -88px;
opacity: 0.8;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
}

.container_24 .grid_26 {
margin-top: -20px;
}

.container_24 .push_24 {
 margin-left: 0px;
}

.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;

}

.ca-menu{
padding: 0 0 0 48px;
margin: 62px auto;
width: 1020px;
cursor: pointer;
}

.ca-menu li{
top: 28px;
left: -140px;
width: 140px;
height: 28px;
border: 3px solid #333;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-left:-48px;

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
/* -webkit-border-radius: 125px; */
-moz-border-radius: 125px;
border-radius: 125px;
}

</style>
4

3 に答える 3

1

まず、HTMLにulの終了タグがありません。

次に、スタイルにcssリセットを追加することをお勧めします。リセットスタイルシートの目的は、デフォルトの行の高さ、見出しの余白やフォントサイズなど、ブラウザの不整合を減らすことです。

ここにCSSツールのリンクがあります：CSSをリセットします

于 2013-03-11T19:29:50.487 に答える
1

他の要素に位置プロパティが設定されていないため（この場合はルート要素に対して）、ビューポートの左側（画面の外側）に140px押している各リストアイテムがありposition: relative;ます。left: -140px;<html>

また、float要素をクリアしていない<li>ため、コンテナdivに高さがありません。float要素はフローから削除され、clearプロパティが設定された要素が後に続く場合を除いて無視されます。

また 、ページの検証も検討してください。ただし、上記の2つの問題が、あなたが話している問題の原因になっていると思います。あなたは本当に良いCSSプラクティスについて学ぶ必要があります..

于 2013-03-11T19:33:48.300 に答える
1

これを試してみることをお勧めします：

.ca-menu li a {
    text-align: left;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #333;
    position: relative;
}

ただし、メニューを作成するには、Superfishを使用することをお勧めします。これは、アニメーションと完全なブラウザ互換性を備えた、素敵でインタラクティブなメニューを作成するための最良の方法です。

簡単にするためのリンクも残しておきます：https ：//github.com/joeldbirch/superfish/

私を信じてください、それは素晴らしいです。私が作ったものを見てください：www.santz.netとsantz.freeiz.com

私はこのプラグインを使用して両方のメニューを開発しました、そしてそれは素晴らしいです。

私が助けてくれたことを願っています、どんな疑問でもここを通してまたは私のFacebookページで私に連絡してください。

于 2013-03-11T19:58:08.620 に答える