Hello, friends! Help with a little problem. Crookedly displayed block in Firefox. Although in Chrome everything is fine.

Firefox

Chrome

.mail-delivery { box-sizing: border-box; float: right; width: 560px; padding: 6px; color: #5a5a5a; font-weight: 400px; border-radius: 16px; background: url("../img/message-pattern.png") #fff; } .message-wrapper { box-sizing: border-box; width: 549px; padding:5px 20px 5px 20px; background-color: #f8f7f4; border-radius: 15px; } .message-wrapper p { box-sizing: border-box; margin-bottom: 35px; color: #5a5a5a; font-size: 16px; font-weight: 400; line-height: 22px; } .message-wrapper form { font-size: 0px; } .message-wrapper input[type="email"] { box-sizing: border-box; display: inline-block; width: 346px; margin: 0; margin-right: 10px; margin-bottom: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; color: #323232; font-size: 16px; line-height: 24px; vertical-align: top; box-shadow: 0 0 0 2px #d3d3d2; border: none; border-radius: 5px; } .message-wrapper input[type="submit"] { display: inline-block; padding:10px 21px; color: #fff; font-size: 17px; line-height: 24px; vertical-align: top; font-weight: 700; text-align: left; border: 0; border-radius: 40px; background-color: #e94e37; background-image: linear-gradient(to bottom, #f26843 0%, #e74b36 100%); box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64); cursor: pointer; outline: none; } 
 <div class="mail-delivery clearfix"> <div class="message-wrapper"> <p> Подпишитесь на нашу сладкую рассылку и будете всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой не нужной ерунды. Честно =) </p> <form class="message-delivery" action="url" method="get"> <input class="form-field" id="mail" type="email" name="email" placeholder="Электронная почта" required> <label class="login-form__label" for="mail">Электронная почта</label> <input type="submit" value="Отправить"> </form> </div> </div>

    1 answer 1

    Most likely the button does not fit - try to reduce it by at least 1px (you can so padding: 10px 20px;). Can reduce input.

    • Thanks, the problem in the button is yes. But in order for it to appear in firefox as on a layout, padding should be reduced to 14px. I tried to reduce input. Firefox is fine, but there are inconsistencies with the layout in chrome. MB are there other ways, specifically for firefox? - b-ars07
    • 2
      .message-wrapper input [type = "email"] {width: 345px;} - Alex
    • Thank. While I have reduced the width of the input'a, I will try to look for a solution to the problem of this one, if I don’t find the only solution for this case. - b-ars07
    • There most likely there is a problem when calculating the width of the input when scaling. For verification, try to zoom in / out with your old rules. If it is normal on some scales, then it is better to do so ... - Alex
    • when scaling, nothing changes, as it was crooked in firefox and remains at any scale! - b-ars07