CSS3的瀏覽器兼容性問題
[英]Browser compatibility issues with CSS3
問題描述
我使用一些CSS3設計了一些網頁。 在Google Chrome瀏覽器中看起來不錯，但是在Internet Explorer中，樣式變得笨拙。 關於這些我有兩個問題：
我可以這樣做嗎：我可以制作兩個樣式表，並根據用戶的瀏覽器加載適當的版本。 讓我說得更清楚：
if browser is Internet Explorer
use stylesheet1.css
else
use stylesheet2.css
我的主要問題是使用border-radius屬性。 有什么辦法可以直接避免這種情況。
4 個解決方案
解決方案1
6 已采納 2012-11-27 13:35:24
在您的HTML /標題中，執行以下操作：
<!--[if IE]>
<link rel = "stylesheet" type = "text/css" href = "ie-css.css" />
<![endif]-->
您還可以進一步分解：
<!--[if IE 7 ]>
<link rel = "stylesheet" type = "text/css" href = "ie7-css.css" />
<![endif]-->
或許多其他組合：
<!--[if IE 7 ]>
<!--[if lt IE 7]> <--- less than IE7
<!--[if gt IE 7]> <--- greater than IE7
<!--[if IE 8 ]>
<!--[if IE 9 ]>
<!--[if !IE]>
HTML5 Boilerplate的建議（和使用的條件）：
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
解決方案2
2 2012-11-27 13:36:52
是的你可以！ 這些稱為條件注釋，它們完全可以滿足您的需求。
<link relblablabla />
<!--[if lt IE9]>
<link relblablabla />
<![endif]-->
僅當您使用的Internet Explorer版本低於IE9時，以上示例才會加載第二個替代樣式表。 查看上面的鏈接以獲取更多示例。
解決方案3
2 2012-11-27 13:37:20
您可以通過擁有2個不同的CSS文件來解決這些問題。 閱讀有關整個跨瀏覽器問題的解決方案：
解決方案4
2 2012-11-27 13:37:40
你可以這樣
在onload中調用函數
function something()
{
nav=navigator.userAgent;
if (nav.indexOf("IE 8.0")!=-1)
{
var $ = document;
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/cssyouwant.css';
link.media = 'all';
head.appendChild(link);
}
}
}
navigtor.userAgent顯示您的瀏覽器名稱。
除了明顯的布局/ CSS問題以外，瀏覽器兼容性問題？
[英]Browser compatibility issues other than the obvious layout/CSS issues?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.