某些浏览器中的浮动问题 - 帮助！ [英] Float Problems in Certain Browsers -- Help!
问题描述
大家好，在这里潜伏了很长时间，因为我通常可以解决我自己的问题，但这里有一个我很难过。
我有一个有效的XHTML 1.0 Transitional布局，并且所有CSS都有效，因为
很好（很多警告，但我并不担心），而且我正在制作
使用浮动属性没有任何问题除了一页（彩色
背景为了清晰起见）：
<一个rel =nofollowhref =http://autographquartet.com/contact.phptarget =_ blank> http://autographquartet.com/contact.php
我已经在BrowserCam.com上设置了一个可公开查看的页面来显示问题
，因为它在几个浏览器中显示出来：
http://www.browsercam.com/public.aspx?proj_id=11969
问题浏览器是IE 5.x for Mac（OS 9或OS X），Safari 1.0，a nd
Opera 6.其余的似乎没有问题显示页面。
因为我的印象是用于PC的IE（甚至是v6）主要
浮动问题，我很惊讶地看到它按照预期呈现页面正好
，而IE 5 / Mac（通常是一个非常可靠的浏览器）
CSS）表面上看。
我可以看到问题与
上浮动的侧边栏有某种关联是的，因为在受影响的浏览器中，粉红色是粉红色。表单的区域被推到
完全降低到侧边栏元素的底部，但是我已经检查了
源和CSS一遍又一遍但没有找到什么都没有。
地方。
如果有任何解决方案（我会采取黑客行为，虽然非黑客般的东西
更可取）我很乐意听到他们，因为我现在已经花了36小时的最佳时间来试图自己解决这个问题，但无济于事。
感谢您的任何建议！
干杯，
Dan
-
dan rubin
webgraph：品牌推广|可用性|设计
< http://www.webgraph.com/>
HI everyone, lurking for a long time here, since I can usually solve my own
problems, but here is one I''m stumped by.
I''ve got a valid XHTML 1.0 Transitional layout, and all the CSS is valid as
well (plenty of warnings, but I''m not worried about that), and I''m making
use of the float property without any problems EXCEPT for one page (coloured
backgrounds added for clarity):
http://autographquartet.com/contact.php
I''ve set up a publicly viewable page on BrowserCam.com to show the problem
as it manifests itself in a few browsers:
http://www.browsercam.com/public.aspx?proj_id=11969
The problem browsers are IE 5.x for Mac (OS 9 or OS X), Safari 1.0, and
Opera 6. The rest seem to display the page without problems.
Since I was under the impression that IE for the PC (even v6) has major
float issues, I was quite surprised to see that it renders the page exactly
as intended, while IE 5/Mac (usually a very solid browser when it comes to
CSS) falls on its face.
I can see that the problem is somehow related to the floated sidebar on the
right, since in the affected browsers the "pink" area of the form is pushed
down exactly to the bottom of the sidebar element, but I''ve checked the
source and the CSS over and over and have not found anything to be out of
place.
If there are any solutions (I''ll take hacks, though something non-hack-like
is preferable) I''d love to hear them, since I''ve now spent the best part of
36 hours trying to figure it out on my own, to no avail.
Thanks for any advice!
Cheers,
Dan
--
dan rubin
webgraph: branding | usability | design
<http://www.webgraph.com/>
推荐答案
Dan Rubin：
Dan Rubin:
大家好，很长一段时间潜伏在这里，因为我通常可以解决我自己的问题，但这里有一个我很难过。
我有一个有效的XHTML 1.0 Transitional布局
[...]
http://autographquartet.com/contact.php
HI everyone, lurking for a long time here, since I can usually solve my
own problems, but here is one I''m stumped by.
I''ve got a valid XHTML 1.0 Transitional layout
[...]
http://autographquartet.com/contact.php
你的代码中有这个：
< h2>< a name =" comments">< / a>评论< / h2>
在XHTML中，我们应该使用 ; ID"对于这样的锚点：
< h2>< a id =" comments">< / a>评论< / h2>
为了向后兼容，最好使用名称。以及：
< h2>< a id =" comments" name =" comments">< / a>评论< / h2>
但最好在主播中添加一些内容：
< h2>< a id =" comments" name =" comments">评论< / a>< / h2>
这是写它的最佳方式。
但请注意悬停的样式规则对于a元素。 Mozilla会 -
正确地将它们应用到这样的锚点上，如果你不写这样的
规则：" a：link：hover { ......}" ;.
我知道，与您的问题无关，但无论如何也许还不错。
- < br $>
Bertil Wennergren< be ****** @ gmx.net> < http://www.bertilow.com>
You have this in your code:
<h2><a name="comments"></a>Comments</h2>
In XHTML we''re supposed to use "id" for such anchors:
<h2><a id="comments"></a>Comments</h2>
For backwards compatibility it is however best to use "name" as well:
<h2><a id="comments" name="comments"></a>Comments</h2>
But it''s better to have some content in the anchor:
<h2><a id="comments" name="comments">Comments</a></h2>
That''s the best way to write it.
But watch out for style rules with "hover" for "a" elements. Mozilla will -
rightly so - apply them to such anchors as well, if you don''t write the
rules like this: "a:link:hover { ... }".
Not related to your question, I know, but perhaps good to know anyway.
--
Bertil Wennergren <be******@gmx.net> <http://www.bertilow.com>
在文章< be ************* @ news.t- online.com>，
Bertilo Wennergren< be ****** @ gmx.net>写道：
In article <be*************@news.t-online.com>,
Bertilo Wennergren <be******@gmx.net> wrote:
< h2>< a id =" comments" name =" comments">评论< / a>< / h2>
这是写它的最佳方式。
但要注意风格带有悬停的规则对于a元素。如果你不写这样的
规则，Mozilla会 - 或者正确地 - 将它们应用于这样的锚点：a：link：hover {...}。
<h2><a id="comments" name="comments">Comments</a></h2>
That''s the best way to write it.
But watch out for style rules with "hover" for "a" elements. Mozilla will -
rightly so - apply them to such anchors as well, if you don''t write the
rules like this: "a:link:hover { ... }".
我有时会使用一点CSS-3魔法来弥补。但我想我可以用b $ b来做更简单的事情。例如，这一行是有效的CSS-3，但w3的
验证器仅限于CSS-2并且会引起恐慌。
a：not（ [href]）{color：inherit;背景：继承; }
-
Kris
kr *******@xs4all.neth erlands（nl）
我们称他为Tortoise，因为他教我们 Mock Turtle说。
I sometimes use a little bit of CSS-3 magic to make up. But I suppose I
can do things simpler. This line for instance, is valid CSS-3 but the
validator at w3 is limited to CSS-2 and will start a panic.
a:not([href]) { color: inherit; background: inherit; }
--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
无头：
Bertilo Wennergren< be ****** @ gmx.net>写道：
Bertilo Wennergren <be******@gmx.net> wrote:
你的代码中有这个：
< h2>< a name =" comments">< / a>评论< / h2>
在XHTML中，我们应该使用id。对于此类锚点：
< h2>< a id =" comments">< / a>评论< / h2>
You have this in your code:
<h2><a name="comments"></a>Comments</h2>
In XHTML we''re supposed to use "id" for such anchors:
<h2><a id="comments"></a>Comments</h2>
< ; h2 id =" comments">评论< / h2>
<h2 id="comments">Comments</h2>
但这意味着让NS4落伍。它不理解这样写的锚点
。我自己已经在我的网站上完成了这项工作，但很多人不会对这些不在所有浏览器中使用的锚点的链接感到满意。
那是'为什么我用一个使用a的版本结束了带有name元素
和id的元素，XHTML推荐建议向后的方式
兼容性。
-
Bertil Wennergren< be ****** @ gmx.net> < http://www.bertilow.com>
That however means leaving NS4 behind. It does not understand anchors
written like that. I myself have done that on my site, but many would not
be comfortable with links to such anchors not working in all browsers.
That''s why I concluded with a version using "a" elements with both "name"
and "id", the way the XHTML recommendations suggests for backwards
compatibility.
--
Bertil Wennergren <be******@gmx.net> <http://www.bertilow.com>
这篇关于某些浏览器中的浮动问题 - 帮助！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
