使用CSS设置我的网页样式

本文介绍了使用CSS设置我的网页样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 伙计们我对CSS不太了解。我用js制作了一个数学计算器并用css设计它。当我用chrome打开网页时，显示效果很好。但是当我用firefox或IE打开它时，设计会变形。当我用所有浏览器打开它时，有人可以告诉我如何以相同的方式制作我的计算器吗？ 这里我插入我的CSS代码。 Plz如果你可以编辑它以支持所有的浏览器。 。 calculator { width ： 350px; height ： 400px; background-color ： ＃1e252e; padding-top ： 10px; padding-left ： 5px; padding-right ： 5px; padding-bot tom ： 5px; border ： 2px solid＃456; 保证金 ： auto; border-color ： ＃567＃000＃000＃456; 背景 ： ＃1e252e; } h1 { font ： 65px / 75px更大胆MS Serif，纽约，衬线; 字母间距 ： 10px; 颜色 ： #fff; position ： 绝对值; left ： 400px; text-shadow ： 0px 3px 1px rgba（0， 0,0，.8），0px 4px 20px rgba（0,0,0，.8）; - moz-transition ： 1.5s; - webkit-transition ： 1.5s; 转换 ： 1.5s; } h1：hover { color ： ＃003; text-shadow ： 0 -3px 1px rgba（255,255,255，.8）， 0px 4px 20px rgba（0,0,0，.8）; - moz-transition ： 1.1s; - webkit-transition ： 1.1s; 过渡 ： 1.1s; } 。 calculator td { height ： 16.66％; } 。 calc_td_result { text-align ： center; } 。 calculator 。 calc_result ， 。 calculator 。 calc_result：focus { width ： 90％; text-align ： right; display ： inline-block; border ： 1px实心黑色插图; border-radius ： 5px; padding ： 0px 4px 1px 4px; font-family ： Digital-7; font-size ： 2em; color ： ＃0fb; height ： 38px; text-align ： right; background ： ＃000; border ： 2px solid＃567; border-color ： ＃123＃456＃456＃123; margin ： 2px 2px; outline ： none; } 。 calc_td_btn { width ： 25％; height ： 90％; border-radius ： 5px; } 。 calc_btn { width ： 85％; height ： 85％; font-size ： 20px; font-family ： Orbitron; text -decoration ： none; text-shadow ： 0 -1px 0 rgba（0,0,0，.3）; border-radius ： 5px } 。 calculator 。 calc_btn ，。 calculator 。 calc_btn：link ，。 calculator 。 calc_btn：visited ，。 calculator 。 calc_btn：hover ，。 calculator 。 calc_btn：active { color ： ＃aaaaaf; background ： ＃000 url（.. / i mages / button-bg-dark.gif）left top repeat-x; border ： 1px solid＃000; border-color ： ＃3f444f＃222＃223＃3f444f; text-shadow ： none; } 。计算器。 calc_btnOver ，。 calculator 。 calc_btnOver：link ，。 calculator 。 calc_btnOver：visited ，。 calculator 。 calc_btnOver：hover ，。演算ator 。 calc_btnOver：active { color ： ＃c6cacf; border-color ： ＃889＃000＃334＃778; text-shadow ： none; } 。 calculator 。 calc_btnActive ，。 calculator 。 calc_btnActive：link ，。 calculator 。 calc_btnActive：已访问，。计算器。 calc_btnActive：hover ，。计算器。 calc_btnActive：active { color ： ＃fff; border-颜色 ： ＃bbb＃000＃223＃999; text-shadow ： - 。1em 0 .1em＃000，.1em 0 .1em＃000,0 -.1em .1em＃000,0.1em .1em＃000,0。3em #fff，0 0 .5em #fff，0 0 .6em #fff; } 。 calculator 。 calc_btnGrayed ，。 calculator 。 calc_btnGrayed：link ，。 calculator 。 calc_btnGrayed：visited ，。 calculator 。 calc_btnGrayed：hover ，。 calculator 。 calc_btnGrayed：active { color ： ＃555; border-color ： ＃444＃222＃222＃333; text-shadow ： none; } / * **数字按钮*** / 。计算器。 digitButton { border-color ： ＃047; } / * **记忆按钮*** / 。 calculator 。 memoryButton { border-color ： ＃740; } / * **基本算术按钮*** / 。计算器。 operatorButtonBasic { border-color ： ＃354; } / * **某些按钮的较小文字*** / 。计算器。 memoryButton 。 button ，。 calculator 。 operatorButtonClearEntry 。 button ，。 calculator 。 operatorButtonClear 。按钮，。计算器。 operatorButtonNegate 。按钮 { font-size ： 12px; font-weight ： 粗体; line-height ： 22px; } 解决方案 这是一个常见问题，许多人在设计网站以实现跨浏览器兼容性时都很困难。特别是IE版本。 以下文章将帮助您解决问题 http://www.catswhocode.com/blog/15-techniques-and-用于跨浏览器-css编码的工具 [ ^ ] http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer -6-bug [ ^ ] http：// sheet。 shiar.nl/browser [ ^ ] http://msdn.microsoft.com/en-us/library/bb250394 （v = vs.85）.aspx [ ^ ] Guys I don''t know much about CSS. I have made a math calculator with js and style it with css. When I''m opening the web page in chrome it displays nicely. But when I open it with firefox or IE the design gets distort. Can somebody tell me how to make my calculator in same way when I''m opening it with all the browsers?Here I''m inserting my CSS code. Plz if you can edit it to supports for all the browsers..calculator{ width:350px; height:400px; background-color:#1e252e;padding-top:10px;padding-left:5px;padding-right:5px; padding-bottom:5px;border:2px solid #456; margin:auto;border-color:#567 #000 #000 #456;background:#1e252e;}h1 { font: 65px/75px bolder "MS Serif", "New York", serif; letter-spacing: 10px; color: #fff;position:absolute;left:400px;text-shadow:0px 3px 1px rgba(0,0,0,.8),0px 4px 20px rgba(0,0,0,.8);-moz-transition: 1.5s; -webkit-transition: 1.5s; transition: 1.5s;}h1:hover { color: #003; text-shadow: 0 -3px 1px rgba(255,255,255,.8), 0px 4px 20px rgba(0,0,0,.8); -moz-transition: 1.1s; -webkit-transition: 1.1s; transition: 1.1s; }.calculator td{ height:16.66%;}.calc_td_result{ text-align:center;}.calculator .calc_result, .calculator .calc_result:focus{ width:90%; text-align:right;display: inline-block;border: 1px solid black inset;border-radius: 5px;padding: 0px 4px 1px 4px;font-family:Digital-7; font-size: 2em;color:#0fb;height:38px;text-align:right;background:#000;border:2px solid #567;border-color:#123 #456 #456 #123;margin:2px 2px;outline:none;}.calc_td_btn{ width:25%; height:90%;border-radius:5px;}.calc_btn{ width:85%; height:85%; font-size:20px;font-family:Orbitron;text-decoration: none;text-shadow: 0 -1px 0 rgba(0,0,0,.3);border-radius:5px}.calculator .calc_btn,.calculator .calc_btn:link,.calculator .calc_btn:visited,.calculator .calc_btn:hover,.calculator .calc_btn:active{color:#a6aaaf;background:#000 url(../images/button-bg-dark.gif) left top repeat-x;border:1px solid #000;border-color:#3f444f #222 #223 #3f444f;text-shadow:none;}.calculator .calc_btnOver,.calculator .calc_btnOver:link,.calculator .calc_btnOver:visited,.calculator .calc_btnOver:hover,.calculator .calc_btnOver:active{color:#c6cacf;border-color:#889 #000 #334 #778;text-shadow:none;}.calculator .calc_btnActive,.calculator .calc_btnActive:link,.calculator .calc_btnActive:visited,.calculator .calc_btnActive:hover,.calculator .calc_btnActive:active{color:#fff;border-color:#bbb #000 #223 #999;text-shadow:-.1em 0 .1em #000, .1em 0 .1em #000, 0 -.1em .1em #000, 0 .1em .1em #000, 0 0 .3em #fff, 0 0 .5em #fff, 0 0 .6em #fff;}.calculator .calc_btnGrayed,.calculator .calc_btnGrayed:link,.calculator .calc_btnGrayed:visited,.calculator .calc_btnGrayed:hover,.calculator .calc_btnGrayed:active {color:#555;border-color:#444 #222 #222 #333;text-shadow:none;}/*** digit buttons ***/.calculator .digitButton {border-color:#047;}/*** memory buttons ***/.calculator .memoryButton {border-color:#740;}/*** basic arithmetic buttons ***/.calculator .operatorButtonBasic {border-color:#354;}/*** smaller text for some buttons ***/.calculator .memoryButton .button,.calculator .operatorButtonClearEntry .button,.calculator .operatorButtonClear .button,.calculator .operatorButtonNegate .button{font-size:12px;font-weight:bold;line-height:22px;} 解决方案 This is a common issue, many people struggle when designing the web site for cross browser compatibility. Specially with IE versions.following article will help you to fix your issuehttp://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding[^]http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs[^]http://sheet.shiar.nl/browser[^]http://msdn.microsoft.com/en-us/library/bb250394(v=vs.85).aspx[^] 这篇关于使用CSS设置我的网页样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！