0

私のブログには、次の CSS を使用してリストに番号を付けるデザインがあります。

list-style: decimal inside none;

各<li>要素内には、表示ブロックであるアンカー タグがあります。WebKit ブラウザーでは、これは問題なく機能します。FireFox、IE、Opera では、内側のブロック アンカーの表示がリスト スタイルの幅だけ押し下げられます。パディング、マージン、テキストインデントを試して修正しようとしましたが、うまくいきません。選択した要素の LI の左の境界線の色を変更したいので、外でスタイルを設定することはできません。アンカータグを絶対位置に配置して正しい位置に配置することはできましたが、ここに欠けている簡単な修正があると感じています。

WebKit 以外のブラウザーで動作するように CSS を修正するソリューションはありますか?

サイトはこちらです。右側のメニューをご覧ください: http://mattsnider.com/styleguide/html/

LI に適用されるすべての CSS:

.menu .menu-item:first-child {
    border-top: 0 none;
}
.menu-numbered .menu-item {
    list-style: decimal inside none;
}
.menu-item {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #FFFFFF;
}

アンカーに適用されるすべての CSS:

.menu-item.selected a {
    border-left-color: black;
}
.menu-item a {
    border-left: 2px solid #FAFAFB;
    display: block;
    margin-top: -1em;
    padding: 8px 10px 8px 8px;
    text-shadow: 0 1px 0 #FFFFFF;
}
.l_aside a {
    color: #3D49FF;
}
a {
    opacity: 0.9;
}
4

1 に答える 1

1

それは 13 年前のバグです...いい発見です! 注意: https://developer.mozilla.org/en-US/docs/CSS/list-style-position ドキュメント: https://bugzilla.mozilla.org/show_bug.cgi?id=36854

ここにオプションがあります....アンカーをに設定して、選択した境界線をリスト要素に交換しながら、 、およびdisplay:inline-blockをいじることができます。完全に言うのは難しいですが、これらのオプションはFirefoxで機能します。 text-aligntext-indent

于 2013-05-02T21:24:19.170 に答える