1

この Web サイトのリンクは、カーソルを合わせると重なっているように見えます。div には正しい高さが指定されていますが、リンクにカーソルを合わせると、165px の高さを取得しているように見えます

http://www.dawaf.co.uk/animate/

高さを 93px に設定して重なりを止める方法はありますか?

#about {
    position: absolute;
    left: 0;
    top: 0;
    height: 89px;
    width: 336px;
}
span.title-link {
    font-size: 6.8em;
    font-weight: bold;
    font-family: 'Titillium Web', Arial, sans-serif;
    text-decoration: none;
    line-height: 93px;
    cursor: pointer;
    opacity: 0;
}

span.title-link a {
    color: #FFF;
    text-decoration: none;
}

span.title-link a:hover {
    color: #E91F4C;
}

#about-red {
    left: -104px;
    width: 545px;
}

#logo-red {
    height: 93px;
    width: 209px;
    position: absolute;
    left: 336px;
}   

/*Echo
------------------------------------------------------------ */
#gallery {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 434px;
}   

#gallery-echo {
    left: -202px;
    width: 714px;
}

#logo-echo {
    height: 93px;
    width: 280px;
    position: absolute;
    left: 434px;
}   

/*Events
------------------------------------------------------------ */
#contact-events {
    left: -216px;
    width: 862px;
}   

#contact {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 448px;
}   

#logo-events {
    height: 93px;
    width: 414px;
    position: absolute;
    left: 448px;
}
4

2 に答える 2

2

スパン、リンクなどのインライン要素はa、'height' プロパティを無視します。試す：

.title-link {
    display: inline-block;
}
于 2013-03-27T18:40:55.607 に答える
0

要素を絶対に配置してサイズを固定している場合は、さらに多くの作業が必要になります。px と %/em 単位を混在させているため、問題はさらに複雑になります。この 1 つの問題をトラブルシューティングするよりも、アプローチを調整することに時間を費やす方がはるかに良いでしょう。

  • 絶対配置をできるだけ少ない要素に制限します。この場合、ナビゲーション アイテムをコンテナーにラップし、コンテナーを絶対に配置します。
  • 高さを固定しないでください。font-sizewithline-height:SOME_MULTIPLE(i.e. 1.5)とともに使用しますvertical-align:middle(要素が inline/inline-block/block のいずれであっても機能します)。
  • ID を使用して個々の要素をスタイリングするのではなく、スタイルを一般化し、クラスを介して複数の要素に適用するようにしてください。これにより、CSS の保守がはるかに簡単になります。

これらのヒントを提供し、質問に答えない理由 ...

  1. このサイトを最初にまとめるのはずっと簡単です
  2. ナビゲーション アイテムのテキストを変更したり、新しいナビゲーション アイテムを追加したりする作業が少なくなります。
  3. この style-with-ids と fix-the-position/size-of-everything メソッドが使用されているのを見てきました。冗長で固定的すぎて役に立ちません。ベスト プラクティスは忘れてください。それは基本的な CSS と HTML の原則に違反しており、誰にとっても単純なことを困難にしています。習慣を破って、これと将来のすべてのプロジェクトをより簡単にしましょう!
于 2013-03-27T19:21:10.037 に答える