使用CSS设置我的网页样式 [英] Style my web page with CSS
问题描述
伙计们我对CSS不太了解。我用js制作了一个数学计算器并用css设计它。当我用chrome打开网页时，显示效果很好。但是当我用firefox或IE打开它时，设计会变形。当我用所有浏览器打开它时，有人可以告诉我如何以相同的方式制作我的计算器吗？
这里我插入我的CSS代码。 Plz如果你可以编辑它以支持所有的浏览器。
。 calculator
{
width ： 350px;
height ： 400px;
background-color ： ＃1e252e;
padding-top ： 10px;
padding-left ： < span class =code-keyword> 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 < span class =code-keyword>： 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 ： < span class =code-keyword> 5px;
padding ： < span class =code-keyword> 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％;
< span class =code-attribut e> border-radius ： 5px;
}
。 calc_btn
{
width ： 85％;
height < span class =code-keyword>： 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 ，
。< span class =code-leadattribute> calculator 。 calc_btn：visited ，
。 calculator 。 calc_btn：hover ，
。 calculator 。 calc_btn：active
{
color ： < span class =code-keyword>＃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 ，
。< span class =code-leadattribute> 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 < span class =code-keyword>： ＃354;
}
/ * **某些按钮的较小文字*** /
。计算器。 memoryButton 。 button ，
。 calculator 。 operatorButtonClearEntry 。 button ，
。 calculator 。 operatorButtonClear 。按钮，
。计算器。 operatorButtonNegate 。按钮
{
font-size ： 12px;
font-weight ： 粗体;
line-height < span class =code-keyword>： 22px;
}
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? 这篇关于使用CSS设置我的网页样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
以下文章将帮助您解决问题
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 [ ^ ]
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 issue
http://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[^]
