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标签中有一个尾部斜杠
你还没有关闭现在播放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>

这只是一个黑客，但要移动IE8和IE9中的搜索框（尚未尝试过IE7），请将以下内容添加到模板的index.php的head部分。它只是“推动”搜索框。

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

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

iframe和css兼容性

1 个答案: