채택완료

윈도우 10에서 버튼이 제대로 안나옵니다

2017-05-10 (수) 13:12:34 4,296

그누 퍼블리셔 팁에서 보았던 링크인데요 

http://livetools.uiparade.com/button-builder.html# 

여기서 버튼을 적용했는데

윈도우 10에서는 버튼이 정상적으로 안나오네요?

이 버튼싸이트는 적용하면 안되는건가요?

c6c896255e781b0049902ff32ff27a5d_1494253088_6436.png

정상적인거 
c6c896255e781b0049902ff32ff27a5d_1494253088_706.png
윈도우 10일경우 

제가 윈도우10이 아니라서 테스트가 어려운데 

Copy
.button {   border: 1px solid #0a3c59;   background: #3e779d;   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);   background: -moz-linear-gradient(top, #65a9d7, #3e779d);   background: -ms-linear-gradient(top, #65a9d7, #3e779d);   background: -o-linear-gradient(top, #65a9d7, #3e779d);   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);   padding: 10.5px 21px;   -webkit-border-radius: 6px;   -moz-border-radius: 6px;   border-radius: 6px;   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;   text-shadow: #7ea4bd 0 1px 0;   color: #06426c;   font-size: 14px;   font-family: helvetica, serif;   text-decoration: none;   vertical-align: middle;   }.button:hover {   border: 1px solid #0a3c59;   text-shadow: #1e4158 0 1px 0;   background: #3e779d;   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);   background: -moz-linear-gradient(top, #65a9d7, #3e779d);   background: -ms-linear-gradient(top, #65a9d7, #3e779d);   background: -o-linear-gradient(top, #65a9d7, #3e779d);   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);   color: #fff;   }.button:active {   text-shadow: #1e4158 0 1px 0;   border: 1px solid #0a3c59;   background: #65a9d7;   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);   background: -moz-linear-gradient(top, #3e779d, #65a9d7);   background: -ms-linear-gradient(top, #3e779d, #65a9d7);   background: -o-linear-gradient(top, #3e779d, #65a9d7);   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);   color: #fff;   }

 

무엇때문에 효과가 안나타나는걸까여?

다른 혹시 최신윈도우 상관없이 나오는 싸이트 괜찮은건 없을까요??


|

답변 5개 / 댓글 1개

채택된 답변
+20 포인트
2017-05-11 (목) 17:10:52

IE버전 11인데 잘나옵니다.?
 

버튼 

https://dabuttonfactory.com/examples 

이곳도있습니다.

2017-05-10 (수) 14:02:57

   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d)); 


top이 아니라 to라고 되어있는거같네요. 일단 오류 1개 발견요 ㅎ

IE도 버전별로 다양하게 있습니다.

윈도우 10이면 IE 버전이 11일텐데요

저는 잘나옵니다.

버전확인은 여기서 

2e2981522786f0a1bdfce37733942903_1494391361_4326.png

P.S 버튼이 이상하게 나온다는 사이트는 위링크가 아닌 질문하신분의 사이트 일텐데요 

사이트 링크는 다른 css가 없기에 잘나올꺼고 님사이트는 다른 CSS와의 중복이나 겹침문제로 

틀리게 보여질수 있습니다. 
 

답변에 대한 댓글 1개

아 제가 잘못적용한건가요...다시 테스트해볼게요
뭔가 겹쳐진건가....
2017-05-10 (수) 13:36:54

72c9ff51ea19cee70b82d1e9c93c3d06_1494390931_8022.png

 

이런식의 컴퓨터라고 해야되나요?

물론 크롬은 잘나오고요 

그림에서 맨 오른쪽 익스플로어인데 

다 최신컴퓨터고요 

제가 2개를 확인했는데 다 회색으로 나오고 

인터넷에 물어봐도 

사람들이 회색으로 보인다해서여 

잘보이는 사람도 있지만여 

웹은 윈도우랑 상관이 없습니다. 

어떤 브라우져를 사용했는지 알아야 합니다. 

짐 링크를 보니 엣지에서는 아주 잘나옵니다.

IE하위버전 같은데 브라우져 버전을 먼저 체크해보세요

답변을 작성하려면 로그인이 필요합니다.