开发者

How to make website look same on all browsers?

开发者 https://www.devze.com 2023-01-21 21:05 出处:网络
I am designing my site on a m开发者_运维问答ac.I used basic formatting and then when i want on to my pc, the wrapper width was too wide.My question is what can i do so that my website looks the same o

I am designing my site on a m开发者_运维问答ac. I used basic formatting and then when i want on to my pc, the wrapper width was too wide. My question is what can i do so that my website looks the same on all browsers/os?


  1. Take http://dowebsitesneedtolookexactlythesameineverybrowser.com/ to heart. Looking good is a sensible goal, looking the same isn't.
  2. Understand the standards (e.g. we can't tell if the difference is because of a bug or because you've provided instructions that only make sense for a particular window size)
  3. Use them (don't forget to validate the HTML and CSS and to lint the JS)
  4. Ensure you engage standards mode
  5. Learn about bugs in browsers


You need to do a lot of testing in different broswers, in some cases you need to have different styles to make them cross browser compatiable, broswers render pages differently here is a nice tutorial with some tools to help you.

You should try and stick to the web standards as much as possible.

http://www.cookielabs.com/web-development/tools-to-keep-your-site-cross-browser-compatible/comment-page-1


Use a css reset like Eric Meyer, CSSesta, BoilerPlate or YUI.

Sign up for https://browserlab.adobe.com/ You can test the most commonly used browsers win & mac


I'd add a couple of further points to @David Dorward's answer:

  1. Validate your (x)html and css, and
  2. Use a css reset stylesheet to reduce the impact of differing browser-defaults for padding, font-weight, size, margin, etc... (the reset itself isn't, strictly, necessary, but understanding how, and why, it can help is a useful process in itself).


Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. It can help you to get prefixes for: animations, transition, transform, grid, flex, flexbox and others. It is recommended by Google and used by Twitter and Alibaba.source

  • autoprefixer tag

  • autoprefixer GitHub – PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use

  • Autoprefixer CSS online – web repl for the original autorefixer.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号