浏览器不兼容 [英] browser incompabilities

问题描述

我有一个问题，我无法解决。我猜这是因为看起来好像
在FireFox中工作得很好而不是在IE中，问题在于浏览器和

而不是CSS。但是，这里是;如果有人可以帮我找到一个快乐的b
妥协，不需要javascript我会是一个快乐的露营者。


我有一个横幅这基本上是一个包含3个元素的列表。 CSS如下：


li.banner {

保证金：10px 0 0 0;

list-style-type：没有;

填充：0;

}


li.banner h1 {

text- align：center;

/ * background-color：#FFFFFF; * /

背景颜色：透明;

border-bottom：1px solid＃FF0000;

border-top：1px solid＃FF0000;

身高：68px;

保证金：0 118px 0 20px;

填充：30px 10px 0px 0px;

溢出：隐藏;

}


..banner span {

background：url（img / BannerBoxRt.gif）对不-repeat;

display：block;

}


..banner span span {

background：url（img / BannerBoxLeft.gif）不留重复;

保证金：0;

显示：块;

}

生成横幅的HTML如下所示：


< li class =" banner">< span>< span>< h1> ;横幅< / h1>< / span>< / span>< / li>


此技术在FireFox中运行得非常好。但是，在IE6中，它在左图像和H1元素之间留下了间隙

。如果我将

H1的左边距更改为0，则可以在IE中使用但覆盖FireFox中的左图像。有人建议我怎么能解决这个问题？

解决方案

Corona写道：

我有一个问题，我无法解决。我猜这是因为它似乎在FireFox中运行良好，而不是在IE中，问题在于浏览器和
而不是CSS。但是，这里是;如果有人能帮助我找到一个快乐的妥协，不需要javascript我会成为一个快乐的露营者。

我有一个横幅基本上是一个包含3个元素的列表。 CSS如下：


[剪辑代码]

这种技术在FireFox中运行得非常好。但是，在IE6中，它在左图像和H1元素之间留下了间隙。如果我将
H1的左边距更改为0，则可以在IE中使用但覆盖FireFox中的左图像。有人建议我怎么能解决这个问题？

你提供一个在线例子怎么样？

你真的不希望任何人将你的代码复制并粘贴到一个

html页面中，想象你使用哪种doctype并猜测

图像的大小然后制作大小合适的图像并上传到

网络服务器和/或/检查问题是什么？


-

Els http://locusmeus.com/

Sonhos vem 。 Sonhos v？o。 Orestoébritfeito。

- Renato Russo -

现在玩：Mud - Tiger Feet

Corona< co*************************@yahoo.com>写道：
<李类= QUOT;横幅"><跨度><跨度>< H1>横幅< / H1>< /跨度>< / span>< / li>

这是无效的HTML。 SPAN元素不能包含H1元素。


-

Alexander

" Els" < EL ********* @ tiscali.nl>在消息中写道

新闻：19 ***************************** @ 40tude.net ...

Corona写道：

< snip>

这种技术在FireFox中运行得非常好。但是，在IE6中，它在左图像和H1元素之间留下了一个
间隙。如果我将
H1的左边距改为0，它可以在IE中使用，但覆盖FireFox中的左图像。有人建议我如何解决这个问题吗？

你提供一个在线示例怎么样？
你没有''我真的希望有人将你的代码复制并粘贴到一个
html页面中，想象你使用哪种doctype并猜测
图像的大小，然后制作正确大小的图像并上传到
webserver和/然后/检查问题是什么？

好​​点 - 感谢您的建议...


您可以在以下网址找到问题的示例：
http：// starship.atspace.com/bug.htm

I have a problem that I can''t fix. I''m guessing that because it appears to
work fine in FireFox and not in IE that the problem is with the browers and
not with the CSS. But, here goes; If somebody can help me figure out a happy
compromise that doesn''t require javascript I''ll be a happy camper.

I have a banner that is basically a list with 3 elements. The CSS is below:

li.banner {
margin:10px 0 0 0;
list-style-type:none;
padding:0;
}

li.banner h1 {
text-align:center;
/* background-color:#FFFFFF; */
background-color:transparent;
border-bottom:1px solid #FF0000;
border-top:1px solid #FF0000;
height:68px;
margin:0 118px 0 20px;
padding:30px 10px 0px 0px;
overflow:hidden;
}

..banner span {
background:url(img/BannerBoxRt.gif) right no-repeat;
display:block;
}

..banner span span {
background:url(img/BannerBoxLeft.gif) left no-repeat;
margin:0;
display:block;
}
The HTML to generate the banner looks like this:

<li class="banner"><span><span><h1>Banner</h1></span></span></li>

This technique works beautifully in FireFox. However, in IE6 it leaves a gap
between the left image and the H1 element. If I change the left margin for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody have a
suggestion how I might be able to fix this problem?

解决方案

Corona wrote:

I have a problem that I can''t fix. I''m guessing that because it appears to
work fine in FireFox and not in IE that the problem is with the browers and
not with the CSS. But, here goes; If somebody can help me figure out a happy
compromise that doesn''t require javascript I''ll be a happy camper.

I have a banner that is basically a list with 3 elements. The CSS is below:
[snip code]
This technique works beautifully in FireFox. However, in IE6 it leaves a gap
between the left image and the H1 element. If I change the left margin for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody have a
suggestion how I might be able to fix this problem?

How about you providing an online example?
You don''t really expect anyone to copy and paste your code into an
html page, imagine which doctype you use and guess the size of the
images and then make images in the right sizes and upload the lot to a
webserver and /then/ check what the problem is?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
Now playing: Mud - Tiger Feet

Corona <co*************************@yahoo.com> wrote:

<li class="banner"><span><span><h1>Banner</h1></span></span></li>

This is invalid HTML. The SPAN element can not contain H1 elements.

--
Alexander

"Els" <el*********@tiscali.nl> wrote in message
news:19*****************************@40tude.net...

Corona wrote:

<snip>

This technique works beautifully in FireFox. However, in IE6 it leaves a
gap
between the left image and the H1 element. If I change the left margin
for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody
have a
suggestion how I might be able to fix this problem?

How about you providing an online example?
You don''t really expect anyone to copy and paste your code into an
html page, imagine which doctype you use and guess the size of the
images and then make images in the right sizes and upload the lot to a
webserver and /then/ check what the problem is?

Good point - thanks for the suggestion...

You can find a sample of the problem at:
http://starship.atspace.com/bug.htm

这篇关于浏览器不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！