画面拡大率を100%にすると、submitボタンの高さが反映されない。

前提・実現したいこと

submitボタンのデザインについて。
ボタンの高さや横幅をpaddingで出しています。
macの画面拡大率を100%にすると高さが死にます。
paddingをやめてheightで指定しても同じです。
ですが画面拡大率100%以外にするときちんと指定した通りに反映します。
なぜ画面拡大率100%だけダメなのか原因を特定できかねているので、どなたか助言頂けると助かります、、、

下記の画像のように９０％とかにするときちんと反映します。
100%だとダメになります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

該当のソースコード

cssは長すぎるので、hamlの.productsの部分から記載いたします。

haml
1.main
2  %span.main-child
3    施設情報を登録してください
4  .main-registration__date
5    .main-registration__date-child
6      登録日
7    = form_for @post, url: posts_path do |f|
8      =f.text_field :registration_date, placeholder: "登録日", type: "text", class:"registration__date-input-text"
9
10      .main-facility
11        .main-facility-child
12          施設名
13        =f.text_field :facility_name, placeholder: "施設名", type: "text", class:"facility-input-text"
14
15      .main-kana
16        .main-kana-child
17          施設名（カナ）
18        =f.text_field :kananame, placeholder: "カナ", type: "text", class:"kana-input-text"
19
20      .main-postal__code
21        .main-postal__code-child
22          郵便番号
23        =f.text_field :postal_code, placeholder: "郵便番号", type: "text", class:"postal__code-input-text"
24
25      .main-address
26        .main-address-child
27          住所
28        =f.text_field :address, placeholder: "住所", type: "text", class:"address-input-text"
29
30      .main-tell
31        .main-tell-child
32          電話番号
33        =f.text_field :tell, placeholder: "電話番号", type: "text", class:"tell-input-text"
34
35      .main-delivery_date
36        .main-delivery_date-child
37          納品日
38        =f.text_field :delivery_date, placeholder: "納品日", type: "text", class:"delivery_date-input-text"
39
40      .main-delivery_note
41        .main-delivery_note-child
42          納品書
43        = f.file_field :delivery_note, class: "delivery_note-image"
44
45      .main-estimate_sheet
46        .main-estimate_sheet-child
47          見積書
48        = f.file_field :estimate_sheet, class: "estimate_sheet-image"
49
50      .top
51        %span.top-name
52          ディーラーを登録してください
53        .top-dealer
54          .top-dealer-child
55          = f.fields_for :dealer do |k|
56            .top-dealer-child_box
57              .top-dealer-child_box-company_text
58                会社名
59                .top-dealer-child_box-company
60                  = k.collection_select :company_id, Company.all, :id, :name
61              .top-dealer-child_box-name_text
62                名前
63                .top-dealer-child_box-name
64                  = k.text_field :name, placeholder: "名前", type: "text", class:"dealer-input-text", id: "dealer_text"
65              .top-dealer-child_box-kana_text
66                名前（カナ）
67                .top-dealer-child_box-kana
68                  = k.text_field :kananame, placeholder: "カナ", type: "text", class:"dealer_kana-input-text", id: "dealer_kana_text"
69
70      .best
71        %span.best-name
72          納品内容を登録してください
73        .best-software
74          .best-software-child
75            ソフトウェア
76          = f.fields_for :programs do |d|
77            #best-software-child_box
78              = d.text_field :software, placeholder: "name", type: "text", class:"program-input-text", id: "program_text"
79
80            .products
81              .products-text_box
82                = d.fields_for :products do |s|
83                  .products-text_box-category_text
84                    カテゴリー
85                    .products-text_box-category
86                      = s.collection_select :category_id, Category.all, :id, :name
87                  .products-text_box-product_text
88                    ハードウェア
89                    .products-text_box-product
90                      = s.text_field :thing, placeholder: "products", type: "text", class:"products-input-text", id: "product_text"
91                  .products-text_box-product_text
92                    型番
93                    .products-text_box-model_number
94                      = s.text_field :model_number, placeholder: "model_number", type: "text", class:"model_number-input-text", id: "model_number_text"
95                  = icon('far', 'plus-square', id: 'pulas-product')
96                  #add_product
97
98            .footer_product
99              = f.submit "送信", class:"product_button"

css
1.products {
2  padding-top: 80px;
3
4  .products-text_box {
5    display: flex;
6    flex-wrap:wrap;
7    width: 600px;
8    margin: 0 auto;
9
10    .products-text_box-category_text {
11      font-family: "Courier";
12      margin-top: 50px;
13
14      .products-text_box-category {
15
16        select {
17          margin-left: 20px;
18          height: 50px;
19          width: 100px;
20        }
21      }
22    }
23
24    .products-text_box-product_text {
25      margin-left: 10px;
26      font-family: "Courier";
27
28      .products-text_box-product {
29        .products-input-text {
30          height: 50px;
31          width: 500px;
32          font-size: large;
33        }
34      }
35    }
36
37    .products-text_box-product_text {
38      margin-left: 20px;
39      font-family: "Courier";
40
41      .products-text_box-model_number {
42        .model_number-input-text {
43          height: 50px;
44          width: 500px;
45          font-size: large;
46        }
47      }
48    }
49    #pulas-product {
50      margin-left: 20px;
51      margin-top: 40px;
52      cursor: pointer;
53    }
54    #minus-product {
55      margin-left: 20px;
56      margin-top: 40px;
57      cursor: pointer;
58    }
59  }
60}
61
62.footer_product {
63
64  .product_button {
65    padding: 30px;
66    font-size: large;
67    margin-top: 100px;
68  }
69}

行動規範の内容に同意します

回答1件

ベストアンサー

css
1input[type='submit'] {
2  -webkit-appearance: none;
3  width: 100px;
4  height: 40px;
5  margin: 0;
6  padding: 0;
7  border: 1px solid #000; /* border仮入れ */
8}