I can not understand a bug between browsers.
See this image of how it is getting in Chrome and IE and how it is in Firefox ! ( link )
// CSS (Less)
div{
p{
position: relative;
text-transform: uppercase;
padding: 0 0 10px;
left: 10%;
top: 18vw;
width: 90%;
span{
padding: 0.2% 4%;
color: #000;
background-color: #193944;
font-size: 320%;
word-wrap: break-word;
}
}
}
I made it here to demonstrate and it worked perfectly. But in my CSS it gives the image error. I guess it's something related to CSS Reset.
div{
height: 400px;
background-color: #2222;
position: relative;
}
div p{
position: relative;
text-transform: uppercase;
padding: 0 0 10px;
left: 10%;
top: 18vw;
width: 90%;
}
div p span{
padding: 0.2% 4%;
color: #fff;
background-color: #193944;
font-size: 220%;
word-wrap: break-word;
}
<div>
<p><span>Texto</span></p>
<p><span>Mais Texto Aqui</span></p>
<p><a href="#">Link</a></p>
</div>