IE渲染的JQuery了slideDown正確

Question

我有機管局不錯的jQuery的向下滑動效果在這裏工作：

http://georgedesign.co.uk/test/markupV2/index.html

在服務部分或團隊部分，您可以點擊任何面板和「詳細信息」框打開。 再次點擊該框，它消失了。

問題是這樣的：在IE（7）名爲'關於'的非常拳頭面板不像面板的其餘部分..相反，它下滑到父div下面，似乎並沒有採取在「位置是：固定」 CSS樣式和其他人一樣..

該面板的內容也看不見..

我在這個問題一兩個星期，一直盯着現在，我的雙眼融化..

我只是不知道爲什麼它在所有其他瀏覽器工作正常，其他面板工作正常，但不是第一個。

如果任何人都可以快速查看代碼，並看看我（必須有！）錯過了，我會感激另一雙眼睛..！

非常感謝，

摹

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); }); 

} 

Answer 1

好了，我終於找到了很多頭髮撕裂之後很好的解決方法。

我正在使用一個名爲'curvycorners'的圓角jQuery插件。它非常酷，任何你想要有一個圓角，只是給它一類圓和你走..

唯一的缺點是.. IE無法處理它，並有點混淆，添加一個類的繪製和一個位置相對於第一個div它找到與'圓'的類。

我所做的只是在第一個適當的元素之前添加一個「round」和「display：none」類的虛擬div，我想要圓角。嘿presto，沒有更多的問題！

我希望這會幫助別人，如果他們遇到同樣的怪異！ ;）

謝謝你們，

摹