CSS跨浏览器问题 [英] CSS cross browser issue
问题描述
IE6,7会在浏览器显示上给我带来不便。我没有与Safari或FF的标志。
我不是一个CSS专家，需要建议在IE上的此列对齐问题。
我不知道从哪里开始，因为我试图搞砸了css文件和css浏览器选择器javascript，仍然无法让它在IE上工作。
我相信的问题围绕着id doc，bd，yui-main，yui-b，box和box-titles。
由于不明原因，IE在其他更好的浏览器中的大小显示不同。
大小宽度和高度值不同。
< body&
< div id =docclass =yui-t2>
< div id =bd>
< div id =yui-main>
< div class =yui-b>
< div id =headerclass =yui-g>
< a href =index.php>
：
：
不幸的是，2个css文件有点压倒多数我明白。
有人可以帮忙吗？
$ b b
任何帮助是值得赞赏的。
app.css
body {
font-size：85％;
font-family：georgia;
}
.yui-t2，#bd，＃yui-main {
z-index：-5;
}
.yui-b，.yui-g {
z-index：auto;
}
div.yui-b div.box {
color：＃333333;
border：1px solid＃c6e1ec; / *这控制首页上的左侧框* /
margin-top：15px;
}
div.yui-b div p.box-title {
/ * background：＃0590C7;
border-bottom：2px solid＃c6e1ec; * /
background：＃6f6f6f;
border-bottom：2px solid＃c6e1ec;
color：#FFFFFF;
display：block;
font-size：93％;
font-weight：bold;
margin：1px;
padding：2px 10px;
}
div.yui-b div ul {
margin：0;
}
div.yui-b div ul li {
border-bottom：0px solid #fff;
list-style-type：none;
}
div.yui-b div ul li a {
color：＃333333;
display：block;
text-decoration：none;
padding：3px 10px;
}
div.yui-b div ul li a：hover {
background：＃c6e1ec;
color：＃333333;
}
grids-min.css
$ b b
body
{text-align：center;}
＃doc，＃doc2，＃doc3，＃doc4，.yui-t1 ，.yui-t2，.yui-t3，.yui-t4，.yui-t5，.yui-t6，.yui-t7
{margin：auto; text-align：left; width：57.69em; * width：56.301em; min-width：750px;}
.yui-b {position：relative;}
.yui-b {_position：static;}
＃yui-main .yui-b {position：static;}
＃yui-main
{width：100％;}
。yui-t1 #yui -main，.yui-t2＃yui-main，.yui-t3＃yui-main
{float：right; margin-left：-25em;}
。yui-t4＃ yui-main，.yui-t5＃yui-main，.yui-t6＃yui-main
{float：left; margin-right：-25em;}
：
：
更多，但是格式在这里stackoverflow是不好的， b
$ b
很抱歉我不希望在这篇文章中发现无益或粗鲁。
真诚
有许多可能的IE6 / 7问题。特别是IE6。
首先要检查的是您的HTML代码是否包含有效的<！DOCTYPE> 声明？如果没有，你的页面将进入怪异模式，这将使所有版本的IE（但特别是IE6）变得坚果。 Quirks模式实际上是一种IE5兼容模式。
第二件事是阅读一些可能给你的问题的IE问题，并在浏览器支持您可能使用的一些功能。有一个非常好的网站（足够合适） Quirksmode.org ，它有一套全面的兼容性表，适用范围广的浏览器功能。
以下网站也可能有帮助：
- http://haslayout.net/css/index
- http://css-class.com/test/bugs/ie/ie-bugs.htm
- http://positioniseverything.net/explorer.html
Google也是您的朋友。 ; - ）
下一个提示，尝试缩小问题范围。删除工作的位，直到你结束了一个页面，演示了最少的其他东西阻碍的问题。将示例保存到 JSFiddle 等网站。
最后，如果剩余的问题是小的显示毛刺，不会阻止页面，你应该给自己权限，只是忽略它们。 IE6和7的市场份额在过去一年一直迅速下降，并将继续下降。
查看最新的浏览器使用情况统计信息： http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011 a>
（显然，如果您的网站具有显着不同的受众特征，您可能需要更加注意IE6和7，但如果是这样，您就已经知道了）
IE6,7 are givimg me grieves on browser display. I didnt have prblems with Safari nor FF. I'm not a CSS expert and in need of advice for this column alignment issues on IE. And I don't know where to begin because I've tried messing around with the css files and the css browser selector javascript and still I can't get it to work on IE.
The problems I believe center around id doc, bd, yui-main, yui-b, box and box-titles. For unclear reasons, the sizes show differently in IE from other better browsers. The sizes width and height values are different.
<body>
<div id="doc" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id="header" class="yui-g">
<a href="index.php">
:
:
unfortunately, the 2 css files are a little overwhelming over me to understand. I tried pasting it here but the format got out of whacked.
Could someone lend a helping hand ?
Any help is appreciated.
app.css
body {
font-size: 85%;
font-family: "georgia";
}
.yui-t2, #bd, #yui-main {
z-index: -5;
}
.yui-b, .yui-g {
z-index: auto;
}
div.yui-b div.box {
color: #333333;
border: 1px solid #c6e1ec; /* this controls the left boxes on front page */
margin-top: 15px;
}
div.yui-b div p.box-title {
/* background: #0590C7;
border-bottom: 2px solid #c6e1ec; */
background: #6f6f6f;
border-bottom: 2px solid #c6e1ec;
color: #FFFFFF;
display: block;
font-size: 93%;
font-weight: bold;
margin: 1px;
padding: 2px 10px;
}
div.yui-b div ul {
margin: 0;
}
div.yui-b div ul li {
border-bottom: 0px solid #fff;
list-style-type: none;
}
div.yui-b div ul li a {
color: #333333;
display: block;
text-decoration: none;
padding: 3px 10px;
}
div.yui-b div ul li a:hover {
background: #c6e1ec;
color: #333333;
}
grids-min.css
body
{text-align:center;}
#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}
.yui-b{position:relative;}
.yui-b{_position:static;}
#yui-main .yui-b{position:static;}
#yui-main
{width:100%;}
.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
{float:right;margin-left:-25em;}
.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
{float:left;margin-right:-25em;}
:
:
more but format is bad over here at stackoverflow to make it readable.
I apologise for I don't wish to come across in this post as unhelpful or rude.
Sincerely
There are many many possible IE6/7 issues. Particularly IE6.
First thing to check is does your HTML code include a valid <!DOCTYPE> declaration? If not, your page will go into quirks mode, which will make all versions of IE (but IE6 in particular) go nuts. Quirks mode is effectively an IE5 compatibility mode. It is badly broken, so make sure you have a doctype.
Second thing to do is read up on some of the IE issues that may be giving you problems, and on browser support for some of the features you may be using. There's a very good website called (appropriately enough) Quirksmode.org which has a comprehensive set of compatibility tables for a wide range of browser features.
The following sites may also help:
- http://haslayout.net/css/index
- http://css-class.com/test/bugs/ie/ie-bugs.htm
- http://positioniseverything.net/explorer.html
Google is your friend here too. ;-)
Next tip, try to narrow down your problem. Strip out the bits that are working until you end up with a page that demonstrates the problem with the minimum of other stuff getting in the way. Save that example to a site like JSFiddle. It'll be easier to work out the issue if you know exactly what the issue is.
Finally, if the remaining issues are minor display glitches that don't prevent the page being used, you should give yourself permission to simply ignore them. The market share for both IE6 and 7 has been dropping rapidly over the last year, and will continue falling. There's very little to be gained by spending too much time sweating over minor issues in these browsers.
See here for up-to-date browser usage stats: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011 (obviously if your site has significantly different demographics, you may need to pay more attention to IE6 and 7, but if that's the case you'll know already)
这篇关于CSS跨浏览器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
