在FireFox 3.0.15/IE 6.0和7.0上以simialr的方式製作CSS渲染

以下css呈現的方式與瀏覽器（主要是Firefox）有所不同： Firefox：border-left-style：dashed似乎不起作用根據需要顯示黑色線條代替。在FireFox 3.0.15/IE 6.0和7.0上以simialr的方式製作CSS渲染

我已經捕獲屏幕截圖

FF - >

http://pixpin.com/images/81898090171964887806.jpg

IE6 - > http://pixpin.com/images/32538710129638992535.jpg

而且字體似乎是另一個問題，使用EM作爲他們的反應相對較好在跨瀏覽器中。當我使用像素它一團糟，但不知道他們是不是更好。

我不是CSS專家，使用CSS讓我感覺比與二手汽車經銷商打交道更糟糕。

.Main

{ 字體-family：宋體，「投石機MS」，無襯線; font-size：0.8em;
border：0px; } 。報頭 font-family：Arial，「Trebuchet MS」，Sans-Serif; font-size：1.2em; 顏色：＃666; background：url（「../ images/header.jpg」）repeat-x top left; padding-left：10px;
padding：4px; text-transform：大寫; border：1px; border-collapse：collapse; border-bottom-width：thin; border-left-style：dashed;

} .Footer { color：＃666; font-family：Arial，「Trebuchet MS」，Sans-Serif; font-size：0.7em; } .Footer td {border-style：none; text-align：center; }

。腳踏板跨度顏色：＃666; font-family：Arial，「Trebuchet MS」，Sans-Serif; font-size：0.7em; font-weight：bold; text-decoration：underline; border-style：none; }

.Footer a font-family：Arial，「Trebuchet MS」，Sans-Serif; font-size：0.7em; 顏色：＃666;

}

。結果-項目TD { 保證金左：10px的; vertical-align：middle; 顏色：＃666; background-color：white; font-size：1。2em的; padding：4px; font-family：Arial，「Trebuchet MS」，Sans-Serif; padding-left：10px;
line-height：20px; border：1px; border-collapse：collapse; border-bottom-width：thin; border-left-style：dashed; }

。結果-HartItem td { margin-left：10px; vertical-align：middle; 顏色：＃666; font-size：1.2em; /* _font-size：1.2em;/* IE6 hack */ padding：4px; font-family：Arial，「Trebuchet MS」，Sans-Serif; background-color：#ccc; padding-left：10px;
line-height：20px; border：1px; border：1px; border-collapse：collapse; border-bottom-width：thin; border-left-style：dashed;

}

金額

{ 文本對齊：右; }

來源

2010-05-26 R.R

您是否有現場示例或錯誤的截圖？此外，所需效果的屏幕截圖通常會幫助我們更多地幫助您:) – Kyle 2010-05-26 08:10:06

這是一個全局性問題，瀏覽器不兼容 – Starx 2010-05-26 08:14:15

問題更新時會附帶截圖。 – 2010-05-27 08:31:29

避免這些錯誤的最佳方法是使用CSS標準化（重置）基準，例如blueprint提供的基準。

如果您不包括藍圖上的所有內容，至少應包括其reset.css文件。這將擺脫領航員之間的字體和間距unconsistent行爲（我不知道關於邊界問題）

編輯：這是你爲了安裝藍圖基本需要：

<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css" media="screen, projection"> 
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print"> 
<!--[if lt IE 8]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

來源

2010-05-26 08:15:32 kikito

實際上，用css提到的問題，字體被設置爲在FF和IE 7上顯示完全相同.CSS的主要問題是您對它的更多投入需求。我試圖保持儘可能簡單。我會嘗試下次使用藍圖，因爲現在我需要快速解決問題。 – 2010-05-26 10:06:25

測試藍圖其實很快。我已經包含了一個示例代碼。只需下載藍圖，使其可用於/ css/blueprint，並在包含您自己的CSS之前在html中包含這三行。如果你不喜歡它，刪除文件和線。它可以在未來爲您節省大量成本。 – kikito 2010-05-27 17:20:13

您可以使用像Meyers reset這樣的CSS重置，或者將IE和Firefox以及其他瀏覽器分開使用Conditional Comments。通常Firefox是瀏覽器，顯示的東西大部分都是正確的，所以當我製作網站時，我首先使用FF，然後將IE CSS改爲適合。

要把它放到你的HTML頁面的<head>：

<!--[if lt IE 9]> 
<link rel="stylesheet" type="text/css" href="path-to-file/ie.css"> 
<![endif]-->

和設置一些不同的CSS是在樣式表IE工程。

重要：border-left-style: dashed;有效的Firefox，請檢查您的級聯邊界衝突留下的屬性，把它放在你的CSS的border-collapse:collapse後，還添加;到統治的結束。你不需要它在CSS選擇器中的最後一條規則，但是當你切換它時，確保你添加它。

希望有所幫助。

來源

2010-05-26 08:19:21 Kyle

是的，會做到這一點，但在此之前，我需要一種在Firefox中生成虛線的方法，您能否提及我可以使用哪種屬性/替換「border-left-style：dashed」以生成虛線。 – 2010-05-26 10:02:46

更新了我的答案。 – Kyle 2010-05-26 10:22:44

所以我嘗試了你在css中提到的更新，但仍然用FF代替虛線顯示黑色線條。我已經更新了原來的問題帖子中的CSS。 – 2010-05-27 05:31:17

只顯示CSS只顯示圖片的一半，沒有html，使任何事情都成爲瘋狂的猜測。在任何情況下，Firefox都會顯示你寫的東西，而IE則是隨着事情的發展而變化的。永遠不要信任IE做正確的事情。始終，始終使用現代瀏覽器（除IE外的任何內容）來初步測試您的標記。但IE中衆多的錯誤和怪癖都是衆所周知的，就像修復它的黑客一樣。

指向違規頁面的鏈接在該問題上值得千次猜測。

來源

2010-05-27 06:03:55 Rob

在哪裏FF中的虛線？ – 2010-05-27 08:02:29

@ R.R - 雖然IE可能會顯示您想要的內容，但這並不意味着您的標記寫入正確。再次，沒有HTML，圖片也沒有多大幫助。 – Rob 2010-05-27 12:38:32

@Rob，行業範圍的框架在運行時生成標記，這是我們無法控制的，您應該看看提供一些解決方法的方向，以便在F.F上進行此css工作。不管怎麼說，多謝拉。 – 2010-05-29 15:44:28

在FireFox 3.0.15/IE 6.0和7.0上以simialr的方式製作CSS渲染

回答

相關問題