Как сайтът ни да изглежда добре при различните бразузъри?


0

Колкото и добре да си научил да  градиш един сайт идва момент ,в който трудът губи ,защото при отварянето в някои браузъри нещата не изглеждат добре.Какви хакове, използвате за да получите  добро представяне при отварянето на различни браузъри.С какви проблеми се сблъсквате ,кое са "чупи".

Аз имам проблем с IE,Google Chrome ,формите се разместват ,както и височина,ширина.С една дума не успявам да нагодя box model-а при всички браузъри.Как се справяте вие?

П.П Използвам <!DOCTYPE html> за HTML 5  .




Отговори



0

Първо - пробвай да занунулиш марджина и падинга на всички елементи с 

* { margin: 0; padding:0; }

Второ - ползвай някакъв framework - Bootstrap 3.x е много добро решение. Ще си намалиш проблемите доста.

За ИЕ- винаги ще имаш ядове там, просто е неизбежно, особено ако таргета ти е потребители с ие6,7, 8, че и 9, от 10 нагоре нещата с ИЕ са добре.


от ivanindzhov (276 точки)


0

Само едно дребно вмъкване от самото Visual Studio:

Performance: Never use the universal selector. It has a big negative performance impact on browser rendering !

По-добре при зануляването да се изброят всички елементи които реално се ползват в кода :)


от c.l.angelov (510 точки)


1
Здравей. В повечето случеи е добре да изпозлваш готов грид има доста генератори в интернет (http://gridpak.com/http://www.gridsystemgenerator.com/gs01.php) и още доста. Също така ако не си запозната прочети за bootstrap - голяма работа е! буквално разрешава повечето проблеми при различни големини на екрана. Друг проблем доста голям е Internet Explorer (v 8 и 9) там не работят повечето неща от CSS3 и HTML5. Силно препоръчвам това : HTML5Shiv и Respond (https://github.com/afarkas/html5shiv  и https://github.com/scottjehl/Respond), дооста улесняват живота. Също така програмка доста добра, която съм открил е CSS Pie (http://css3pie.com/), доста лесно се линква към HTML-a  и позволява CSS3 пропъртита като border-radius, box-shadow и gradient да се рендерират и на Интернет Експлорър 8. Това е от мен дано съм бил полезен :) 



0

ivanindzhov Благодаря за отговора.Моето зануляване е следното:

html,head,title,body,div,nav,ul,li,a,img,input[type="button"],h2,h3,h4,input[type="text"],select,option,input [type="submit"],p,footer

{ padding:0;

margin:0;

border:0;

outline:0;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

}

konstantin.popov.10 Благодаря за отговорите и линковете ще ги пробвам за shiv  бях чувала ,но не знаех кога и как се ползва и затова го отбягвах.Имате ли опит с условните коментари във връзка с IE ,срещнах доста изписано,но отново съм не сигурна къде да се вместят о какъв да е css  между коментарите.

П.П Хубаво да има една лекция относно различни проблеми с браузърите( вярно е че излизат нови неща,но все пак за прохождащите дизайнери е важно.)Не успях да спечеля място за стаж именно ,защото не докарах еднакво представяне при различните браузъри.Някой ако е ходил на стаж за уеб дизайнер може да сподели и на лични,за да не спамим темата,какво са му искали.


от maria1186 (15 точки)

0
Така е да наистина може да ти строшът нервичките. Съвет са ми давали дръж още малко, старай се да правиш яки неща и качествени с новостите на CSS3 и HTML5 и стискай зъби...не остана още много живот на IE8 ;)



0

Можеш да погледнеш бонус лекцията на Дончо от миналата година, част от курса "JS Apps".

Мисля, че ще ти бъде доста полезна. :)


от lnikod4s (6538 точки)


0

 Ами много трудно :D

Проблема е с JavaScript, с css-a не е толкова трудно.

Първо препоръчвам да ползваш bootstrap за дизайн- много е добър и решава доста от тези проблеми. Независимо обаче дали ползваш bootstrap спазвай следните принципи : 

 1) Избягвай на всяка цена position:absolute

 2) Избягбай на всяка цена top:20px, bottom:10px и т.н.

 3)Въобще избягвай пиксели за нещо различно от padding. Работи с проценти, относителни елементи и float-вай всичко. И на bootstrap долу-горе спазва тези идеи

 Така ще изградиш гъвкав дизайн който ще се държи адекватно и при свиване на екрана. При нужда по-лесно ще го пригодиш за мобилни устройства.


от ivan.mihov1 (4988 точки)


0
position: absolute с relative в/у parent елемента прави чудеса в някои случаи. Всяко нещо си има кога и защо да се ползва, ясно е че няма да си изгради layout-a така, но няма причина насилствено да го избягва когато потрябва.

от staccobain (834 точки)

0

lnikod4s,  ivan.mihov1 , staccobain   Благодаря за съветите ще ги изпробвам от такива насоки имах нужда.

Нещо да споделите и за Chrome  и при него имаше разминавания като при IE ,попаднах на материали за използването на квадратни скоби някой има ли опит с тях?

от maria1186 (15 точки)