我用的是min-height: min-content,在阅读模式下高度是合理的
但是在查询模式下,这项设置被忽略掉了
应该怎么解决这个问题啊?因为有些词条很短,设置最低高度为多少ex不合适
你或者在阅读模式里打开控制台(点击顶部栏词典名称右边的第一个按钮),然后把网页源代码发上来看看。
我没找到在哪里可以复制源代码,就截了图。
min-height设置的是分割线下面的竖排部分,.gloss
mhcd.css的内容
/* 加载字体 */
@font-face {font-family: 'Mongolian Universal White'; src: local('Mongolian Universal White'), url('/MongolianUniversalWhite.ttf');}
@font-face {font-family: 'Setuon Goth 12'; src: local('Setuon Goth 12'), url('/SOGOTH12.ttf');}
@font-face {font-family: 'SimSun'; src: local('SimSun'), url('/simsun.ttc');}
@font-face {font-family: 'FZLiShu-S01'; src: local('FZLiShu-S01'), url('/FZLiShu-S01.ttf');}
@font-face {font-family: 'Tahoma'; src: local('Tahoma'), url('/tahoma.ttf');}
/* 设置不同设备的基础字号 */
@media only screen and (max-device-width: 1440px) {body {font-size: 16px;}} /* 手机 */
@media only screen and (min-device-width: 1441px) {body {font-size: 15px;}} /* 电脑 */
/* Tab */
.tab {overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1;} /* Style the tab */
.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer;
padding: 4px 6px; transition: 0.3s; font-size: 92%;} /* Style the buttons inside the tab */
.tab button:hover {background-color: #ddd;} /* Change background color of buttons on hover */
.tab button.active {background-color: #ccc;} /* Create an active/current tablink class */
.mhTabcontent {display: none; padding: 3px 4px; border: 1px solid #ccc; border-top: none;} /* Style the tab content */
/* 顶部横栏 */
.head {writing-mode: tb-lr; margin-bottom: 2px;}
.cyrl {font-family: 'Tahoma';}
.ipa {color: purple; font-family: 'ipa'; font-size: 92%; margin: 0 10px 0 10px;}
.boxed {font-size: 80%; border:1px solid #3070E0; border-radius:3px; padding:2px; color:#3070E0;}
.uni {font-size: 90%; text-align: left; display: none;}
.uni::before {content:'nicode: ';}
.exBtn {font-size: 90%; font-family: 'FZLiShu-S01'; border-radius : 70%; color: #fff; padding: 0 3px; margin-left : 10px; background-color: indigo;}
/* 页码及图片 */
.pg {font-size: 70%; display:inline-block; float:right; vertical-align:middle; margin:.05em 0 0; line-height:1.3em;
padding: 1px .25em; border-radius:.25em; border:1px solid #f4ece6; background-color:#faf4ef}
.pg::after {font-size: 80%; content:'页'; margin-left:.1em}
.pg:hover {font-size: 72%; color:maroon; border:1px solid #f7e9de; background-color:#fdf4ed;
transform:scale(1.02); -webkit-transform:scale(1.02); transform-origin:center;}
img {height: 100%; width: 100%;}
.hide {display: none;} /* 默认隐藏图片 */
/* 正文竖排 */
.gloss {-ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr;
-ms-text-orientation: mixed; -webkit-text-orientation: mixed; -moz-text-orientation: mixed;
font-family: 'Mongolian Universal White', 'SimSun', 'Tahoma'; text-align: left; color: black; max-height:80ex; min-height: min-content;
margin: 6px 0 12px 0; width: 100%;}
.mn {-ms-text-orientation: sideways; -webkit-text-orientation: sideways; -moz-text-orientation: sideways; font-size: 160%; margin-bottom: 2px;}
.lat {color: darkblue; font-family: 'Setuon Goth 12'; font-size: 60%; margin: 0 10px 0 5px;}
.pos {border:1px solid #3070E0; border-radius:3px; padding:2px 1px 2px 1px; display:inline-block; margin:0 2px 0 5px; color:#3070E0; font-size:80%;}
.usg {border:1px solid #955a02; border-radius:5px; padding:2px 1px 2px 1px; margin:2px 0 3px 0; color:#955a02; font-size:80%;}
.mnEx {font-size: 95%; color: #000033;}
.cnEx {font-size: 92%; color: #333333; margin-top: 2px;}
你方便把词典文件发上来我看看吗?
麻烦啦
mhcd.css (3.8 KB)
蒙汉词典(增订本).mdx (8.8 MB)
MongolianUniversalWhite.ttf (489.3 KB)
上面我举例查询的是tataqu
看了一下,好像是比较难,因为普通查询模式下容器的高度是随内容的高度调整的,这个特性会令一些CSS效果无效,除了用绝对高度单位貌似没有更好的办法,或者看看群里有没有别的坛友有更好的建议吧。
谢谢啊,那我就先暂时这样用着