2012-04-10 3 views
0

は私がAA素敵なjqueryのここで働く効果ダウンスライドを持っています開く。 もう一度そのボックスをクリックしてください。IEのレンダリングjQueryのslideDownが誤っ

IE(7)では、「About」という名前の最初のパネルはパネルの残りの部分と同じように動作しません。代わりに親divの下にスライドし、採用されていないようです「位置:固定他人のようなCSSスタイル..

このパネルの内容はまた、目に見えない..です

私は今、週または2のために、この問題を見つめてきた、と私の目があります他のすべてのブラウザでうまく動作していて、他のパネルはうまく動作しますが、最初のものではないことがわかりません。

誰かがコードをすばやく見て、私が(忘れてはならない)ものが見えたら、もう一組の目に感謝します。

本当にありがとうございました、

G

psの、私はjQueryのを短縮することができると確信しているが、私はまだそれにグリップを取得しています! ;)

それは場合に役立ちます。ここのコードです:

HTML:

<div class="our-services"> 
        <strong class="slogan main-strap">Property Investment for Private Equity</strong> 

        <span id="services" class="scroll">&nbsp;</span> 

        <h2>Our Services</h2> 

        <p>We are a UK &amp; European Property Investment and Asset Management Business, dedicated to generating value and providing real returns to our investors in any environment.</p> 
        <ul class="services-list"> 

         <li class="slide1"> 
          <div class="holder"> 
           <div class="frame"> 
            <h3><a href="#">About</a></h3> 
            <div class="description"> 
             <p>Our business was established in 2002 and we remain an inspired and motivated team of property professionals.</p> 
            </div> 
            <img src="images/img1.jpg" width="233" height="139" alt="about" /> 
            <a class="more" href="#">Read more...</a> 
           </div> 
          </div> 

         </li> 
         <div class="Text1 round"> 
            <img src="images/X.gif" class="x-class" width="12" height="12" alt="X"> 
            <p>Our success is driven by our integrity which is at the heart of everything we do, our recognition of the wisdom and vision of others around us, and our will to succeed. 
           Collectively the Athanor Team have in excess of 80 years experience working in real estate and financial markets. This has given us a deep understanding of how to innovate and drive value in changing conditions. We have been involved in property transactions with a value of in excess of £3 billion.<br> 
           Athanor are specialists in :</p> 
           <ul> 
            <li>The origination of property investment opportunities 
            </li> 
            <li>Strategy &amp; analysis 
            </li> 
            <li>Debt origination 
            </li> 
            <li>Establishment of appropriate corporate, tax and fund structures 
            </li> 
            <li>Property asset management. 
            </li> 
            <li>Property disposals. 
            </li> 
           </ul> 
           <img class="round" src="images/img88.jpg" width="300" height="154" alt="Mission Crane"> 
         </div> 

         <li class="slide2"> 
          <div class="holder"> 
           <div class="frame"> 
            <h3><a href="#">Mission</a></h3> 
            <div class="description"> 
             <p>To excel in providing our clients with a focused, individual and comprehensive solution to property investing.</p> 
            </div> 
            <img src="images/img2.jpg" width="233" height="139" alt="mission" /> 
            <a class="more" href="#">Read more...</a> 
           </div> 
          </div> 
         </li> 

         <li class="slide3"> 
          <div class="holder"> 
           <div class="frame"> 
            <h3><a href="#">Strategy</a></h3> 
            <div class="description"> 
             <p>At Athanor we focus on ‘value’ investing into primarily institutional quality property.</p> 
            </div> 
            <img src="images/img3.jpg" width="233" height="139" alt="strategy" /> 
            <a class="more" href="#">Read more...</a> 
           </div> 
          </div> 
         </li> 
        </ul> 



        <div class="Text2 round"> 

       <img class="round" src="images/mission-crane.jpg" width="450" height="306" alt="Mission Crane"> 
        <img src="images/X.gif" class="x-class" style="float:right" width="12" height="12" alt="X"> 
       <h3>Mission</h3> 
       <p>"To excel in providing our clients with a focused, individual and comprehensive solution to property investing. To generate value and real returns in any environment." 
        </p> 
      </div> 

        <div class="Text3 round"> 
          <img src="images/X.gif" class="x-class" width="12" height="12" alt="X"> 
          <p>At Athanor we focus on 'value' investing into primarily institutional quality property. We target assets providing long term locational stability, with secure and attractive income returns and which also have the potential for both income and capital growth. Cash forms a significant proportion of our total return expectations.<br> 
           New opportunities are selected via a combination of research, intelligence and experience.<br> 
           Our approach is opportunistic both geographically and by property sector, although always with a view to having a balance commensurate with our perception of the risks and rewards associated with those sectors and geographies.<br> 
           We understand that real estate assets are very responsive to active management. Consequently asset management is a core activity which ensures returns are maximised throughout the life of investments.<br> 
           Primary geographies – UK and Continental Europe.<br> 
           Property sectors – all property sectors but primarily retail, logistics/industrial, offices, leisure and residential.</p> 
        </div> 


       </div> 

はCSS:

li.slide1, li.slide2, li.slide3, li.mug1, li.mug2, li.mug3, li.mug4 {cursor:pointer;} 

div.Text1, div.Text2, div.Text3, div.mugText1, div.mugText2, div.mugText3, div.mugText4 {display:none; margin-top:24px;} 

div.Text1, .Text2, .Text3, .mugText1, .mugText2, .mugText3, .mugText4 { 
    background-color: white; 
    position:fixed; 
    top:215px; 
    width:860px; 
    height:323px; 
    padding:20px; 
    border: 1px solid #e6e6e6; 
    } 

.mugText1, .mugText2, .mugText3, .mugText4 {position:fixed; top:215px; height:400px;} 

.Text1 img {float:right;} 

.Text1 p {margin:0; font-size:18px;} 

.Text1 ul {font-size:16px; width:440px; float:left;} 

.Text2 img {float:left} 

.Text2 p, .Text2 h3 {margin: 0 90px 0 490px !important;} 

.Text3 p {font-size:18px} 

JS:

$('.slide1').click(function() { $('.Text1').slideDown(500).fadeIn(500); 



$('.Text2').slideUp(250).fadeOut(0); $('.Text3').slideUp(250).fadeOut(0); }); 

    $('.slide2').click(function() { $('.Text1').slideUp(250).fadeOut(0); 

$('.Text2').slideDown(500).fadeIn(500); $('.Text3').slideUp(250).fadeOut(0); }); 

    $('.slide3').click(function() { $('.Text1').slideUp(250).fadeOut(0); $('.Text2').slideUp(250).fadeOut(0); 

$('.Text3').slideDown(500).fadeIn(500); }); 


$('.Text1, .Text2, .Text3').click(function() { $('.Text1, .Text2, .Text3').slideUp(250).fadeOut(0); }); 


$('.mug1').click(function() { $('.mugText1').slideDown(500).fadeIn(500); 
$('.mugText2').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0); 
$('.mugText4').slideUp(250).fadeOut(0); }); 
$('.mug2').click(function() { $('.mugText2').slideDown(500).fadeIn(500); 
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0); 
$('.mugText4').slideUp(250).fadeOut(0); }); 
$('.mug3').click(function() { $('.mugText3').slideDown(500).fadeIn(500); 
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0); 
$('.mugText4').slideUp(250).fadeOut(0); }); 
$('.mug4').click(function() { $('.mugText4').slideDown(500).fadeIn(500); 
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0); 
$('.mugText3').slideUp(250).fadeOut(0); }); 

$('.mugText1, .mugText2, .mugText3, .mugText4').click(function() { $('.mugText1, .mugText2, .mugText3, .mugText4').slideUp(150).fadeOut(0); }); 

} 
+0

あなたはラウンド描かれたクラステキスト1を使用していますか?どこに? – Jack

+0

CSSの名前に同じhtmlコードを貼り付けた – Jack

答えて

1

まあ、私はようやく見つかりました多くの髪の毛が引き裂かれた後の良い回避策。

私はjqueryプラグインを使用しています。丸みを帯びたコーナーには 'curvycorners'という名前が付けられています。それはかなりクールな、何か丸い角を持ってほしい、ちょうどラウンドのクラスを与えるとあなたが行く..

私はそれを処理することはできません、少し混乱を招く最初のdivとの相対的な位置で、 'round'のクラスで検索されます。

私がしたのは、角を丸くしたい最初の適切な要素の前に、 'round'と 'display:none'のクラスでダミーdivを追加することでした。そして、ちょっと前の話、それ以上の問題はありません!

これは、同じ奇妙なことに遭遇した場合、これが誰かに役立つことを願っています! ;)

みんなありがとうは、

G

+1

本当にIEの角を丸くしたい場合は、[CSS3Pie](http://css3pie.com/)を試してみてください。他のすべてのブラウザはCSSを使ってそれらをサポートしているので、プラグインは必要ありません。 IEはそれをサポートしていませんが、CSS3Pieがそれをサポートしているので、すべてのブラウザで同じCSSコードを使用できます。 – Spudley