Question

我有一个段落在I.E中显得很远但是它在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;

}

Answer 1

看起来主要是因为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>

Answer 2

您应该在主CSS脚本之前的标题中包含浏览器样式重置CSS。这些类型的脚本将浏览器CSS样式重置为不同的样式。

我可以推荐 Normalize.css但是那里有很多人！

Answer 3

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>

在不同的浏览器中定位问题

3 个答案: