0

我需要一些兼容性帮助。我的网站在浏览器中看起来不同。Chrome/firefox 等看起来不错，但 IE 搞砸了。看看：http ://southwestarkansasradio.com/joomla

我正在使用 Joomla 2.5。搜索框向左移动，我的 on air box 脚本在 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>
4

1 回答 1

0

对于这么小的一段代码，那个 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>

这只是一个 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]-->
于 2012-04-20T22:25:57.277 回答