Question

在一个更大的站点中，我有一个带有两个按钮的简单页面。调整页面大小时，一个按钮会缩小-例如，当我在Firefox中打开书签弹出窗口时，或者使用ctrl-plus和ctrl-minus或鼠标滚轮以更大和较小的尺寸显示页面时。

与其他页面元素不同，无响应按钮的左边缘保持锚定在同一点，但右边缘缩小（向左移动），因此其相对于其他元素的大小发生变化，从而使其不响应。

此按钮不会缩小：

<div class="ttg_text_grid2">
   <label for="file-upload" class="custom-file-upload">Select file</label>
     <input id="file-upload" type="file"/>
    </label>
</div>

此按钮缩小：

<div class="ttg_text_grid3">
<button class="custom-file-upload" id="submit_btn" type="submit" value="Submit" onsubmit="submit_btn.disabled = true; return true;">Take action</button></div>

页面顶部还有一些文字不会缩小。

以下是相关的CSS：

.ttg_text_grid2 {
  grid-column: 9 / 15;
  grid-row: 6 / 19;
  padding-left: 22.5%;
}

.ttg_text_grid3 {
  grid-column: 9 / 15;
  grid-row: 6 / 19;
  padding-left: 11%;
}

.custom-file-upload {
  border: 1px solid rgb(117,163,126);
  background-color: black;
  width: 65%;
  padding: 8px 20px;
  border-radius: 15px;
  font-size: 20px;
  font-family: Sans-serif;
  font-size: 13pt;
  text-align: center;
  color: rgb(255,255,255);
  cursor: pointer;
}

input[type=file] {
  display: none;
}

基于上面的html和CSS，为什么第一个按钮的大小不变，而第二个按钮却缩小和扩展？

这对于响应式设计很重要。整个站点都是css网格，并且除此以外，站点上的其他所有内容都响应。

感谢任何想法。

Answer 1

您的module Capabilities def self.win10_ie11 caps = Selenium::WebDriver::Remote::Capabilities.new caps["name"] = "win10_ie11" caps["browserName"] = "Internet Explorer" caps["version"] = "11" caps["platform"] = "Windows 10" caps["record_video"] = "true" caps["timeZone"] = "Tokyo" # for TestingBot caps end end类具有基于百分比的宽度值。例如，通过将其更改为.custom-file-upload，将确保它不会根据屏幕尺寸而改变尺寸。

200px

Answer 2

我认为要点是宽度以％为单位；因此，显然它应该缩小和扩展。尝试从CSS中删除width属性。

使用填充来保持按钮大小始终相同，或者仅使用以px为单位的静态大小。

如何防止提交按钮缩小，使其不响应？

2 个答案: