html - iframe 和 css 兼容性

Question

我需要一些兼容性方面的帮助。我的网站在浏览器中看起来不同。 Chrome/firefox 等看起来不错，但 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 标签中有一个尾部斜线
• 您还没有关闭 nowplaying div 中的 css 样式，即您忘记了结束撇号。这会导致问题。
• iframe 没有 valign 属性
• iframe 中的高度和宽度格式不正确
• iframe 没有边框属性

类似下面的内容应该会更好，但无法在您的服务器上进行调试，这只是猜测。无论如何，正如我所说，我已经将它保留在你的结构中并修复了明显的东西，但是当你在网站上尝试它时可能仍然会有一些问题，但它会让你更接近。但是，我当然不会这样做。

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> 

这只是一个 hack，但要在 IE8 和 IE9(还没有尝试过 IE7)中移动搜索框，请将以下内容添加到模板的 index.php 的头部部分。它只是将搜索框“推”过来。

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

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