0

サイトは Emeraldcityguitars.com で見ることができます。リンクは、下部にある New および Vintage Spotlight スペースの Spotlight タイトルです。画像はリンクしていますが、商品タイトルのテキストはリンクしていません。

問題は、z-indexed div に含まれていることだと思いますが、リンクが壊れる理由がわかりません。

ヘルプ...

 <div id="vintage_spotlight">
    <% if @vintage_spotlight.blank? %>

    <% else %>
    <div id="vintage_image">
        <%= link_to (image_tag @vintage_spotlight.front_photo.data.url(:spotlight)), @vintage_spotlight %>
        <div id="vintage_image_title"><%= link_to @vintage_spotlight.title, @vintage_spotlight, :class => 'spotlight_link' %></div>
    <% end %>
</div>

そしてCSS...

#vintage_spotlight{
float:right;
background-image:url(/images/vintage_spotlight_bg.png);
background-repeat:no-repeat;
height:265px;
width:257px;
margin-right:34px;}

#vintage_spotlight a{color:#fff;}

#vintage_image{
padding:40px 0 0 8px;
position:relative;}

#vintage_image_title{
position:absolute; 
bottom:0px; 
right:10px;
height:26px;
width:160px;
padding:10px 0 0 3px;
background-image:url(/images/spotlight_overlay.png);
background-repeat:no-repeat;
color:#fff;
font-size:12px;
z-index:100; }

.spotlight_link{
position:relative;
z-index:200;}

何かご意見は？

4

2 に答える 2

0

本当の答えではありませんが、他の誰も答えなかったので...

このページを IE8 (私が持っているすべて) で読み込むと、最初はリンクが機能し、次にテキストが変更され (文字通り、フォントが変更され)、リンクが非アクティブになります。

したがって、私の意見では、何かが CSS に干渉しています。おそらく、JS または別の要素が重複して問題を引き起こしている可能性があります。次のトラブルシューティング手順をお勧めします。開発環境で新しいページを使用します。

  1. そのリンク、そのコンテナ、およびこれら 2 つの要素に関連付けられた JS/CSS のみを操作します。取り組んでいるものを絞り込みます。
  2. 位置、z-index、float に注意してください。私が現在持っている唯一の疑いがあるので、可能であればそれらを削除してみてください.
  3. CSS に問題がないことを確認した場合、問題はおそらく JS 干渉です。それに対処するために別の質問を投稿することをお勧めします。
于 2009-10-29T03:18:57.100 に答える
0

ご覧のとおり、内部のリンク： 

<div id="vintage_image">

画像をラップすると、レンダリング後に高さが 0 になります。

リンクのスタイルを変更する JavaScript があるかどうかを確認してください。

于 2009-10-29T03:50:45.287 に答える