2011-12-28 247 views
2

我正在開發一個帶有表單的簡單頁面。 當我在頁面中放入輸入文本時,輸入元素中出現的字符具有瀏覽器默認值,使用開發人員工具在Chrome中可以看到字體默認爲「webkit-small-control」。但是,這將出現在頁面中的一個字段將只是像這樣瀏覽器默認值

<td> 
    <span id="readOnlyField">data</span> 
</td> 

數據的跨場當我渲染頁面裏面的數據跨度場不等於輸入文本字段中的數據。我的問題是,如何知道瀏覽器應用於輸入文本字段的字體和顏色?我無法使用「webkit-small-control」的值,因爲它不適用於其他瀏覽器。

回答

4

通常,您無法知道這些值,因爲默認值因瀏覽器而異。另外,用戶可以設置諸如默認字體系列和樣式以及超鏈接顏色之類的東西。

使用「CSS重置」樣式表來覆蓋瀏覽器默認值與您自己的「基本」樣式是一種很好的做法。網絡上有很多CSS重置示例,例如the HTML5 Doctor's oneEric Meyer's one。雖然你的問題只是關於字體風格,但重新設置其他風格也可以防止長期的許多麻煩。

0

無法確切知道瀏覽器會選擇什麼樣的默認字體大小。

而應該重置CSS(與Normalize爲例),並進一步風格的頁面,例如:

span.some-class { 
    font-size: 12px; 
    color: #333; 
} 

然後你的HTML:

<span class="some-class" id="readOnlyField">data</span> 
+0

這是怎麼回事與downvote? +1,因爲這是一個很好的答案。 –

+0

是的,你和我的答案都是可靠的。這是奇怪的。 –

0

這是你的原因應該首先重置所有樣式或使用一些已建立的css框架,如blueprint,並避免重新發明輪子。

或許你也應該重寫你想在你的CSS來aovid瀏覽器默認

+0

downvote是怎麼回事? +1,因爲這是一個很好的答案。 –

+0

我不是downvoter,但可能有人認爲用戶應該控制自己的字體大小,並建議所有網頁使用其所有者的偏好,而不是尊重用戶的應該是downvoted。 –

+0

你可能是對的,但這不合理的downvote。問題是如何做到這一點,以及這是否可能,而不是如果它是「正確的」。此外,它**可以定義自定義字體大小,並仍然尊重用戶的設置 - 使用像'body {font-size:100%; }'將主體字體大小設置爲用戶的首選字體大小(無論如何都是默認字體大小),然後您可以使用%作爲CSS其餘部分的單位來派生其他字體大小。 –

0

爲字體的所有主流瀏覽器的默認顏色任何款式#000,但你可以將其設置爲任何你想要的。只要它在系統上查看,就可以設置爲任何你想要的字體。這些默認值可以通過谷歌搜索找到。

0

沒有已知的方法可以在您的頁面上找到瀏覽器默認使用的字體。您也不能在CSS中指定瀏覽器使用默認情況下爲input元素使用的任何字體呈現span元素。

但是你可以在spaninput元素使文本通過明確設置它們的font-familyfont-size,例如看起來是一樣的(與通常的CSS注意事項,當然)

input, span { font: 100% Arial, sans-serif; } 

從理論上講,你可能需要太設置其他屬性(沒有法律反對閃爍紫色默認強調顯示input的元素含量的瀏覽器),但是這應該照顧的東西在實踐中。請注意,需要設置字體大小,因爲瀏覽器通常使用縮小的字體大小(大約90%)用於輸入框。

5

我只在Mac上的Safari注意到這一點。爲了使一切內容顯示爲預期你需要重寫旅行的用戶代理樣式表:在您的reset.css使用此

font: -webkit-small-control; 

可以覆蓋:

button, input, textarea, select, isindex, datagrid { 
    font: inherit; 
} 

我似乎無法找到這個在任何reset.css中,但它爲我做了詭計。

0

如果您願意使用javascript,您可以使用getComputedStyle來查找此數據(查看Mozilla Developer Network)。

對於舊的IE瀏覽器,您需要使用currentStyle屬性(檢出Quirksmode)。

從一個元素複製所有款式到另一個,你可以做這樣的事情(我簡化了這個只支持現代瀏覽器):

var spanElement = document.querySelector('#mySpanElement'); 
var inputElement = document.querySelector('#myInputElement'); 
var styles = getComputedStyle(inputElement); 
for (var name in styles) { 
    spanElement.style[name] = styles[name]; 
} 

你可能會發現你要進行篩選,或只需要幾個你真正想要的。