iframe和css兼容性

Question

我需要一些兼容性幫助。我的網站在瀏覽器中看起來不同。鉻/火狐等看起來是正確的，但IE瀏覽器是搞砸了。看看：http://southwestarkansasradio.com/joomla

我使用的是Joomla 2.5。搜索框移動到左側，我的空氣箱腳本在IE中不起作用。代碼在下面，你能幫忙嗎？謝謝。

<table border="0"> 
<tr> 
<th> 
<center><img style="float: left;" 
src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35"  
width="316" /><br><img 
src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316" 
height="216" alt="" border="1"><div id="now playing" style="position: absolute; top: 
60px; left: 20px;> 

<!--[if IE]> 

<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" 
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none" 
allowtransparency="true" valign="top" ></iframe> 

<![endif]--> 

<!--[if !IE]>--> 

<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" 
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none" 
valign="top" ></iframe> 

<!--<![endif]--> 

</div></center> 
</th></tr></table></div> 

Answer 1

對於這樣一小段代碼來說，html確實很難讀懂。使用縮進將使您更容易發現錯誤。有許多事情錯：

• 開幕DIV從片斷缺失
• 一個的div的「正在播放」在id的空間。 HTML ID中不能有空格。
• 你應該在br標記中有一個斜線
• 你還沒有關閉正在播放的div中的css風格，即你忘記了關閉的apostophe。這會造成問題。
• iframe中沒有一個VALIGN屬性
• 中嚴重形成
• I幀I幀的高度和寬度沒有邊框屬性

類似下面應該提供更好的服務，但沒有能夠在你的服務器上進行調試就是猜測。無論如何，正如我所說的，我已經將它保留在你的結構中，並修復了一些明顯的問題，但是當你在網站上嘗試它時，可能仍然會遇到一些問題，但它會讓你更加接近。但我當然不會這樣做。

w3c驗證器是一個方便的工具。

<div> 
    <table border="0"> 
     <tr> 
      <th> 
       <center> 
        <img style="float: left;" src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35" width="316" /> 
        <br/> 
        <img src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316" height="216" alt="" border="1"> 

        <div id="nowplaying" style="position: absolute; top: 60px; left: 20px;"> 
         <!--[if IE]> 
          <iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" allowtransparency="true" ></iframe> 
         <![endif]--> 

         <!--[if !IE]>--> 
          <iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" ></iframe> 
         <!--<![endif]--> 
        </div> 
       </center> 
      </th> 
     </tr> 
    </table> 
</div> 

這僅僅是一個黑客，但移動搜索框在IE8和IE9（沒試過IE7）以下內容添加到您的模板的index.php文件頭部分。這只是「推動」搜索框。

<!--[if IE]> 
<style type="text/css"> 
div.topmenu 
{ 
    width: 250px !important; 
} 

div.search 
{ 
    margin-left: 30px !important; 
} 
</style> 
<![endif]-->