第一个问题，fieldset的设置宽度以后，为何会被撑宽。

fieldset在没有内部元素时，是以block方式解析的，即外部100%宽度自适应；但设置width以后，本应当维持这个宽度了，为何会被撑宽呢？

因为它的min-width属性，在CSS的属性的权重中，min-width > width，在chrome里面：

fieldset { min-width: -webkit-min-content; }

改变它的min-width就可以，复写它的值，或者改为inherit（考虑到是手机端开发，inherit是全支持的）都可以。

fieldset { min-width: inherit; }
/*or*/
fieldset { min-width: 100px; }

IE和chrome的相应问题已经解决，但是还剩firefox。查看fieldset的默认样式：

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0.35em 0.625em 0.75em;
  border: 2px groove ThreeDFace;
}
*|*::-moz-fieldset-content {
  display: block;
  unicode-bidi: inherit;
  text-overflow: inherit;
  height: 100%;   
}

抱歉，没有能够找到使得其宽度固定时，使得其被子元素撑宽的属性。等今后有空了再细细研究吧。

至此，已经能符合楼主的一半要求，在手机端大部分浏览器（非firefox浏览器）下面，fieldset的宽度不再被子元素撑宽
第二个问题，pre元素为何会自动撑宽。

因为其white-space属性：

pre { white-space: pre; }

pre的语义既是预保留格式，这意味着（外部标签无法决定pre标签的宽度，pre标签自动包裹内部的文本节点，不忽略空白//有误，见下）。

pre标签的宽度是由如下机制进行的：

在内部内容不宽过父容器时，其宽度自适应于父容器；
在内部内容比父容器宽的时候，其宽度包裹内部内容。
这个机制类似于min-width，但比min-width还多了对于换行/空白符的处理，下面是w3school对于white-space属性值的解释：

normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

把white-space改为除了nowrap和pre以外的值即可符合你的要求。不过我想问，你真的需要修改pre标签的默认行为吗？改变pre标签的默认行为，即意味着你放弃了pre标签的原本语义。

感谢分享https://segmentfault.com/q/1010000000271095