2009 Jul 27 2009

User Agent Style Sheet: misteryo margin sa Google Chrome

Kahapon, tulad ng bawat ibang "Araw Ground taong matakaw", ako ay nagtatrabaho sa ilang mga layout ng CSS / tableless. Lahat ay pagpunta sa IE 7, FF 3 at Chrome, untill biglang, Nakita ko ang ilang mga di-ignorable margin na nakikita lamang sa Google Chrome. Kahit na napaka kakaiba at worring, Ito ay ilang mga bagong bug / isyu na ako ay dumating accross, nagkaroon sa wakas ng ilang pagandahin sa aking pangmundo trabaho. Malungkot (ngunit magandang) May maayos ito sa loob ng ilang minuto ng probe ...

Talaga, mukhang hindi pinansin ng Google Chrome ang aking CSS Resets (margin: 0px). Talagang ito ay dulot ng ang stylesheet user agent (-WebKit-padding-simula: 40px). Kaya solusyon ay upang i-reset ito estilo sa pamamagitan ng pagtatakda ng padding: 0 ang magulo na mga elemento.
Ang isang mabuting paraan upang maiwasan ang problemang ito mula sa nangyayari sa anumang elemento ay gamitin ang isang global CSS REST tulad ng mga sumusunod

* {Margin: 0; padding: 0;}

Ano ang User Agent Style Sheet (Specification)?
Ang mga sumusunod na sipi ay kinuha mula sa http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link na basahin ang higit pa sa User Agent Style Sheet

CSS 1 introduces ang mga ideya sa pamamagitan ng na nagsasabi na ang bawat User Agent (UA, madalas isang 'web browser' o 'web kliyente) ay magkakaroon ng isang estilo ng sheet ng default na nagpapakita ng mga dokumento sa isang makatwirang - ngunit arguably ng makalupa - paraan. CSS 2 sabi na matularin ahente ng gumagamit ay kailangang mag-aplay ng isang default sheet estilo (o kumilos bilang kung sila mismo) at na ang default na estilo ng isang user agent ng sheet ay dapat ipakita ang mga elemento ng ang wika dokumento sa paraan na masunod ang pangkalahatang inaasahan pagtatanghal para sa mga wika dokumento; CSS 3 ay malamang na maging ng parehong isip.

Dahil ang CSS pagtutukoy iwanan ito sa pagpapatupad kung gamitin ang isang "real" style sheet para sa default na display o hindi, hindi ito ay kahanga-hanga na hindi mo mahanap ang isang default na estilo ng sheet sa pag-install ng folder ng bawat browser. Hindi tulad ng Internet Explorer ng Microsoft pati na rin ang Opera, halimbawa (at Sa pagkaalam ko), sa Gecko browser tulad ng Firefox at Netscape Navigator (hanapin para sa "html.css") ngunit din Konqueror kaysa gawin itong simpleng upang maunawaan ang kanilang mga default styling.


2008 Aug 2 2008

Pagtatakda ng DOCTYPE sa XSL

Huling linggo ko nilikha ng isang progessive HTML / CSS layout para sa isang client, sinubukan ito sa IE6, IE7 at FF 3, tila lubos pinong ... HANGGANG! mga layout nagpunta karagdagang down na cycle ang manufacting. Ito nabigo. Pahina ng layout elemento lamang nagpunta ang lahat sa ibabaw ng lugar kapag ang HTML layout ay convert sa XSL at XML ay inilapat sa ito ... Nakakainis!!!

Hindi maaaring matulog ok sa ibabaw ng katapusan ng linggo, sa pag-asa ng Lunes umaga, kapag kukunin ko na ayusin ito SH **. Ngunit ngayon ay nagkakaroon ng isang maliit na experince sa pagharap sa mga uri ng mga sitwasyon (ng Browser Quirks, ibig sabihin ko), alam ko ito ay may kinalaman sa walang ibang ngunit DOCTYPE .... at Ito ay ...

Ang problema:
Gusto mong kontrol ang DOCTYPE, dahil ang iyong mga pagbabago ay isama ang isang default na DOCTYPE tahasan, at ka layout ay para sa isang siklutin.

Ang Solusyon:
Ang XSLT panoorin ay nagbibigay ng mga pamamaraan output upang itakda ang isang ang DOCTYPE ng choise. Gayundin, para sa amin UI developer, ang paksa ng interes ay magiging HTML output pamamaraan at mga paraan ng XML output .

Na rin! bago makuha mo nababato, dito ay ang pag-aayos.

Para sa halimbawa, kung mayroon kang mga sumusunod na DOCTYPE sa iyong HTML bersyon: -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Pagkatapos sa ang XSL ay mayroon ka na magkaroon ng mga sumusunod: -

<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/loose.dtd" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" />

at wakas! huwag tiyakin na ang iyong output ng XSLT obeys DOCTYPE na napili mo.


NDK bahay | Pagpapahayag ng IT | pagpapahayag ng panlasa | pagpapahayag Penmenship | pagpapahayag ng sindak | pagpapahayag ng aking sarili