0

「幅: 100%」にデフォルト設定されている INPUT 要素があります。これにより、その隣にある他の要素が次の行に押し出されます。これを一時的に修正するために、次のように要素にインライン スタイル属性を追加しました。

<input style="width: auto" ...>

これはうまくいきました。ここで、一時的な修正をクリーンアップするために戻り、すべてのスタイルをスタイル属性から外部スタイルシートに移動します。この特定の「幅: 自動」スタイルをスタイルシートに移動すると、Firefox では問題なく表示されますが、IE ではそれを無視し、デフォルトで再び「幅: 100%」になり、その隣の要素が再び吹き飛ばされます。

IE の Web 開発者用ツールバーは、スタイルがどこから来ているのかを教えてくれません。そのため、何が起こっているのかを診断するのは困難です。私の最善の推測は、IE で優先される何かが他にあるということですが、それが何であるかはわかりません。

編集: IE 開発者バーで右クリックしようとしたことを誓いますが、そうではないと思います-IE で「幅: 100%」で「スタイルをトレース」すると、「1. 一致しません」というポップアップが表示されます。ただし、Firefox では、この INPUT もカバーする「#outer foo bar INPUT」のような上記の要素のセレクターから 100% が漏れていることが示されました。INPUT要素に直接「#id」を指定すると、「#id foo bar INPUT」よりも具体性が高いと誤って想定しましたが、ブラウザーはこれについて同意していないと思います。いずれにせよ、それが私の問題の根源になったので、コメントをありがとう。コメントを回答に昇格させる方法があればいいのに...

4

1 に答える 1

2

ルールが競合したり、順序が間違っていたり (優先順位が同じであったり) 互いに打ち消し合ったりしていないことを絶対に確信していますか?

John Sheehan の提案以外に試すことができることの 1 つは、入力要素に ID を適用し、スタイル シートで、ID セレクターを介してその要素に width:auto を追加するルールを作成することです。

そうすれば、ルールの優先順位が高くなり、適用される可能性が高くなります。これにより、問題がどこにあるかをよりよく理解できます。

編集: あなたの更新を考慮すると、あなたの悲しみを引き起こしたルールは、想定どおりに機能しています (具体性に関する限り)。要素に具体的に対処したい場合でも、次のようなより具体的なルールを書くことができます。

#outer foo bar INPUT#id {
  width:auto;
}

ただし、CSS をこのように記述していることに気付いた場合は、何か間違ったことをした可能性があり、CSS ルールをどのように構築したかを再考する必要があるかもしれません。

于 2008-12-10T07:36:18.487 に答える