異なるブラウザでの位置付けの問題

-1

私は実際にはIEに残っているが、FirefoxとChromeでその問題は解決している段落がありますが、これを今のところ修正しようとしていますが、正しく表示されないようですブラウザ異なるブラウザでの位置付けの問題

Codepen：https://codepen.io/mikegr/pen/ggXdVG

HTML

<p class = "info">Welcome to the programming part of my portfolio,<br> 
here you can find a link to my github profile all of my programming work is.<br> 
There is also a link to a bonus Snake game I created using JavaScript.<br> 
the languages I am experienced in include html,css,javascript,php,mysql,java,python and c++</p>

CSS

.info{ 
clear:both; 
position: fixed; 
display:block; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
top: 70%; 
transform: translateY(-50%); 
text-align: center; 
color: black; 
font-family: 'Comfortaa', cursive; 
padding: 10px; 
font-style: italic; 
font-weight: 700; 
font-size: 16px; 
text-align: center; 
background-color: rgba(255,255,255, 1); 
width: fit-content; 
height: fit-content; 
border: 2px solid black; 
border-radius: 50px; 
width: -moz-max-content; 
width: -webkit-max-content; 
display: table;

}

出典

2017-01-28 Michael Grinnell

IEではfit-contentがサポートされていないことが主な理由です。 http://caniuse.com/#feat=intrinsic-width。

.info { 
 
    clear: both; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    margin: auto; 
 
    top: 70%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    color: black; 
 
    font-family: 'Comfortaa', cursive; 
 
    padding: 10px; 
 
    font-style: italic; 
 
    font-weight: 700; 
 
    font-size: 16px; 
 
    text-align: center; 
 
    background-color: rgba(255, 255, 255, 1); 
 
    border: 2px solid black; 
 
    border-radius: 50px; 
 
}

 <p class = "info">Welcome to the programming part of my portfolio,<br> 
 
      here you can find a link to my github profile all of my programming work is.<br> 
 
      There is also a link to a bonus Snake game I created using JavaScript.<br> 
 
      the languages I am experienced in include html,css,javascript,php,mysql,java,python and c++</p>

出典

2017-01-28 20:23:36

主CSSスクリプトの前に、ブラウザスタイルのリセットCSSをヘッダに含めることをおすすめします。これらのタイプのスクリプトはブラウザのCSSスタイルを異なるものに変更します。

私は Normalize.cssをお勧めできますが、そこにはたくさんのものがあります！

出典

2017-01-28 20:20:00 cnzac

はありがとう、私はそれをintになりますので、前にこれを聞いたことがありません –

Try the code given below. just copy and paste it as it is. I hope it will work fine. 

    <html> 
     <head> 
      <style> 

      .info{ 
       position: relative; 
       display:block; 
       top: 500px; 
       margin: auto; 
       transform: translateY(-50%); 
       text-align: center; 
       color: black; 
       font-family: 'Comfortaa', cursive; 
       padding: 10px; 
       font-style: italic; 
       font-weight: 700; 
       font-size: 16px; 
       background-color: rgba(255,255,255, 1); 
       width: 50%; 
       width: fit-content; 
       height: fit-content; 
       border: 2px solid black; 
       border-radius: 50px; 
       width: -moz-max-content; 
       width: -webkit-max-content; 
      } 
      </style> 
     </head> 
     <body> 
      <p class = "info">Welcome to the programming part of my portfolio,<br> 
       here you can find a link to my github profile all of my programming work is.<br> 
       There is also a link to a bonus Snake game I created using JavaScript.<br> 
       the languages I am experienced in include html,css,javascript,php,mysql,java,python and c++ 
      </p> 
     </body> 
    </html>

出典

2017-01-28 20:28:25

異なるブラウザでの位置付けの問題

答えて

関連する問題