睡蓮‧池水間

Guest
2012-May-23  
0 位會員和 9 位訪客在線上

文章 :: xoops

CSS 註解對IE 6 的影響

睡蓮
 
池水間 
今天在XOOPS正體中文站的一篇討論文章中已替一位網友解決了佈景方面的問題,但就沒有在版上解釋CSS檔裡是什麼地方導致佈景在IE6下無法置中。另外亦有鑑於過去在正體中文站所看到提供的CSS檔內容,發現在CSS內使用中文註解者甚為普遍。今天特別為此開一篇文章,講解一下在編寫CSS時應當避免的地方。

在CSS檔裡加上註解,原是正常不過的事,但若註解用上中文,容易造成IE 6 下佈景不正常、CSS語法再怎麼寫也不能出現預期的效果。除註解之外,還有需要注意的便是 style.css 與 theme.html 編碼要一致。

在CSS加上註解時,宜遵照書寫CSS的規則,使用英文來註解。非要用中文不可的話,在註解文字兩端與星號之間,例如下面的「這」字前和「解」字後就必須各留下空白位:

/* 這是中文註解 */

若沒有留下空白位,其結果是當IE 6 瀏覽器解析CSS語法時,遇到沒有空白位的中文註解地方,便會略過註解後面的語法,從而造成IE 6 下的佈景問題,這可說是IE 6 的一個bug,此問題己在IE 7 版本中修正。

帶中文註解的CSS若是用在自己的佈景上,只要注意一下避免的地方,一般是沒有問題的,但還是建議使用英文註解為佳。另外,若佈景是發佈給使用者使用,應當考慮使用者使用不同的編碼、不同的語系,而儘可能地使用英文註解,否則,即使使用者沒有IE 6下的佈景問題,在任何瀏覽器下的CSS裡也將會看到亂碼的註解。

    «« CSS水平等级 網頁設計配色精彩十例 »»    

引用

  • 文章地址: http://waterlily-lsl.com/modules/article/view.article.php/c11/156
  • 引用地址: http://waterlily-lsl.com/modules/article/trackback.php/156

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 CSS 註解對IE 6 的影響
b168168tw

網友

註冊: 09年4月3日
回覆數: 6

發表日期: 09/4/18 7:29  更新日期: 09/4/18 7:29


我以前也遇過這樣的事情,找了好久才發現IE6的註解中文字不能跟/*文字*/黏在一起,否則以下的CSS樣式都不會正常,原來這又是一個IE6的BUG。

回覆

 CSS 註解對IE 6 的影響
睡蓮

網主

註冊: 08年3月21日
來自: 池水間
回覆數: 464

發表日期: 09/4/18 15:01  更新日期: 09/4/18 15:01


IE 還有另一個bug,看了擇飛作者的這篇 http://waterlily-lsl.com/modules/article/view.article.php/c2/165 好文後168可能會用得著呢。

回覆

 CSS 註解對IE 6 的影響
訪客

發表日期: 10/1/26 0:05  更新日期: 10/1/26 0:05


版大您好:
不好意思我在做網頁的時候也遇到類似這個佈景問題(從xoop正體中文延伸計畫連結過來)
這是我所做的網頁http://140.120.90.96/xoops2/(很粗略的版本)
在首頁的時候ie 6,7及google瀏覽器都可以正常置中,
但是點選進入"關於孟堯"之後ie 6,7的顯示位置就無法置中,但用google瀏覽器顯示正常,
style.css 與theme.html檔案編碼都是utf-8,css內沒有中文註解,
xoop使用2.4.2版本,
因為學校老師都是使用ie,所以一定要修改,
但在網路上搜尋很多資料還是無法查出原因,
不知道版大是否能協助,謝謝。

聯繫e-mail:cis@nchu.edu.tw

回覆

 CSS 註解對IE 6 的影響
睡蓮

網主

註冊: 08年3月21日
來自: 池水間
回覆數: 464

發表日期: 10/1/26 13:09  更新日期: 10/1/26 13:09


這應該不是CSS註解造成的問題
請您試試打開aboutu模組下的index.php
將如下頭和尾端的一段橘色代碼刪除
接下來將這個index.php和佈景theme.html兩個檔皆另存成「無BOM」的UTF8編碼格式
然後覆蓋到原來的兩個檔看看

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="tekst/html"; charset="big5">
<TITLE>AboutU</TITLE>
</HEAD>
<BODY>
<?php
$xoopsOption['template_main'] = 'contact.html';
include "../../mainfile.php";
include(XOOPS_ROOT_PATH."/header.php");
include XOOPS_ROOT_PATH."/class/xoopsformloader.php";
if ( file_exists("../language/".$xoopsConfig['language']."/main.php") ) 
	{
	include "../language/".$xoopsConfig['language']."/main.php";
	} else {
	include "../language/english/main.php";
	}

global $config_handler, $xoopsUser, $xoopsConfig;
$intro = $xoopsConfig['sitename'];
$temat = $_POST[od];
$uremail = $_POST[uremail];
$tresc = $_POST[tresc];

//-----[welcome text]-------------------------------------------------------
echo("<center><b>"._AU_SELECT_PAGE1.$xoopsConfig['sitename']._AU_SELECT_PAGE2."</b></center><br /><br />");
//-----[menu of main site]--------------------------------------------------
/*echo '<img src="images/8.png" align="center"> &nbsp;';
echo '<a href='.XOOPS_URL.'/modules/aboutu/contact.php>'._AU_SELECT_CONTACT.'';
echo '<br /><br /></a>';
echo '<img src="images/7.png" align="center"> &nbsp;';
echo '<a href='.XOOPS_URL.'/modules/aboutu/about.php>'._AU_SELECT_ABOUT.'';
echo '<br /><br /></a>';
echo '<img src="images/6.png" align="center"> &nbsp;';
echo '<a href='.XOOPS_URL.'/modules/aboutu/tell.php>'._AU_SELECT_TELL.'</a>';
*/

	echo '<a href='.XOOPS_URL.'/modules/aboutu/contact.php><img src="images/8.png" align="center">&nbsp;'._AU_SELECT_CONTACT.'';
	echo '<br /><hr><br /></a>';
	echo '<a href='.XOOPS_URL.'/modules/aboutu/about.php><img src="images/6.png" align="center">&nbsp;'._AU_SELECT_ABOUT.'';
	echo '<br /><hr><br /></a>';
	echo '<a href='.XOOPS_URL.'/modules/aboutu/tell.php ><img src="images/7.png" align="center">&nbsp;'._AU_SELECT_TELL.'</a>'; 


//-----[footer]-------------------------------------------------------------
include_once XOOPS_ROOT_PATH.'/footer.php';
?>
</BODY>
</HTML>

回覆

 CSS 註解對IE 6 的影響
訪客

發表日期: 10/2/2 14:46  更新日期: 10/2/2 14:46


非常非常的謝謝版大,修改已經成功了~~~~~

大大大大大大大感謝^____________________________^!!!!

回覆

 

最 新 發 表 及 資 訊 區

此為池水間 banner ,需要安裝 Adobe Flash Player 才能觀看內容。

最新留言

最新留言:2012-Jan-6 11:13am
留言編號:76
留言者: wuji888
網主回覆:
總留言數: 71

前往萍踪留影

造訪統計

今天:70
昨天:362
本週:1904
本月:11920
總計:433157
平均:311

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
除另有註明外,本站內容均採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 授權條款授權
登 入